# Dialog 对话框 #### 在保留当前页面状态的情况下，告知用户并承载相关操作
## 基础用法 #### Dialog 弹出一个对话框,需要设置 v-model 属性，它接收 Boolean，当为 true 时显示 Dialog

## 居中布局 #### 标题和底部可水平居中将center设置为true即可使标题和底部居中。 center仅影响标题和底部区域。 Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS 样式。

## 自定义内容 #### Dialog 组件的内容可以是任意的，甚至可以是表格或表单

## 嵌套的 Dialog #### 如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。通常我们不建议使用嵌套对话框。如果你需要在页面上呈现多个对话框，你可以简单地打平它们，以便它们彼此之间是平级关系。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

## 可拖拽对话框 #### 试着拖动一下header部分吧,设置draggable属性为true以做到拖拽

## 使用具名插槽自定义使用具名插槽 #header 、#footer 可对模态框整体根据需要自定义

## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | v-model | 是否显示 Dialog | boolean | — | false | | title | Dialog 的标题，也可通过具名 slot传入 | string | — | — | | width | Dialog 的宽度 | string | — | 50% | | top | Dialog CSS 中的 margin-top 值 | string | — | 15vh | | append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | — | false | | custom-class | Dialog 的自定义类名 | string | — | — | | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true | | show-close | 是否显示关闭按钮 | boolean | — | true | | center | 是否对头部和底部采用居中布局 | boolean | — | false |
## Slot | name | 说明 | |------|--------| | — | Dialog 的内容 | | header | Dialog 标题区的内容 | | footer | Dialog 按钮操作区的内容 |
## Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | open | Dialog 打开的回调 | — | | opened | Dialog 打开动画结束时的回调 | — | | close | Dialog 关闭的回调 | — | | closed | Dialog 关闭动画结束时的回调 | — |