#  Dialog 模态对话框
---
### 基础用法，使用```v-model```来双向绑定弹框是否显示

<div class="demo-block">
  <y-button @click="d1=!d1">普通对话框</y-button>
  <y-dialog v-model="d1" title="我是自定义标题">
    <p>我是自定义内容,自定义的内容呀,自定义的内容呀,自定义的内容呀,自定义的内容呀</p>
  </y-dialog>
</div>
<script>
  export default{
    data(){
      return{
        d1:false  
      }
    }
  }
</script>

::: demo

``` html
<template>
  <y-button @click="d1=!d1">普通对话框</y-button>
  <y-dialog v-model="d1" title="我是自定义标题">
    <p>我是自定义内容,自定义的内容呀,自定义的内容呀,自定义的内容呀,自定义的内容呀</p>
  </y-dialog>
</template>

<script>
  export default{
    data(){
      return{
        d1:false  
      }
    }
  }
</script>
```
:::

### 提示对话框
添加属性```type="toast"```,用来展示最后的结果

<div class="demo-block">
  <y-button @click="d1=!d1">提示对话框</y-button>
  <y-dialog v-model="d1" type="toast" icon="success" title="恭喜你">
  </y-dialog>
</div>
<script>
  export default{
    data(){
      return{
        d1:false  
      }
    }
  }
</script>

::: demo

``` html
<template>
  <y-button @click="d1=!d1">提示对话框</y-button>
  <y-dialog v-model="d1" type="toast" icon="success" title="恭喜你">
  </y-dialog>
</template>

<script>
  export default{
    data(){
      return{
        d1:false  
      }
    }
  }
</script>

```
:::

### 可以嵌套内容的提示对话框
添加属性```type="toast"```,用来展示最后的结果

<div class="demo-block">
  <y-button @click="d1=!d1">提示对话框</y-button>
  <y-dialog v-model="d1" type="toast" icon="success" title="恭喜你">
     <y-input type="textarea" placeholder="请输入内容"></y-input>
  </y-dialog>
</div>
<script>
  export default{
    data(){
      return{
        d1:false  
      }
    }
  }
</script>

::: demo

``` html
<template>
  <y-button @click="d1=!d1">提示对话框</y-button>
  <y-dialog v-model="d1" type="toast" icon="success" title="恭喜你">
     <y-input type="textarea" placeholder="请输入内容"></y-input>
  </y-dialog>
</template>

<script>
  export default{
    data(){
      return{
        d1:false  
      }
    }
  }
</script>

```
:::


### y-switch 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
|value|指对话框是否显示，可使用 v-model 双向绑定数据。|Boolean|true/false|false| 
| title  | 对话框的标题 | String   |    --  | --   |
| type | 弹框的模式，可选值为 modal，toast| String | --| modal |
| true-text  | 当value为true时 ，显示的文字 | String  |  -- |  --  |
| false-text  | 当value为false时 ，显示的文字 | String  |  -- |  --  |
| icon  | 弹框的图标，type为toast可用 ，默认可选值为success，warning,error,info | String|  -- |  success  |
| ok  | 点击确定的回调 | Function  |    --  | --   |
| cancel  | 点击取消的回调 | Function   |    --  | --   |
| close  | 窗口关闭的回调 | Function   |    --  | --   |