主题
Dialog 对话框
使用
适用
在保留当前页面状态的情况下，告知用户并承载相关操作。
基础用法
Dialog 弹出一个对话框，适合需要定制性更大的场景。
需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为三个部分：header、body 和 footer，header 和 footer 分别需要接收具名为 header 和 footer 的插槽使用； title 属性用于定义标题，它是可选的，默认值为空。 最后，本例还展示了 before-close 的用法。
TIP
before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
自定义内容
对话框的内容可以是任何东西，甚至是一个表格或表单。 此示例显示如何在 Dialog 中使用组件库提供的的表格和表单。
自定义头部
header 可用于自定义显示标题的区域。 为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。
嵌套的对话框
如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
通常我们不建议使用嵌套对话框。 如果你需要在页面上呈现多个对话框，你可以简单地打平它们，以便它们彼此之间是平级关系。 如果必须要在一个对话框内展示另一个对话框，可以将内部嵌套的对话框属性 append-to-body 设置为 true，嵌套的对话框将附加到 body 而不是其父节点，这样两个对话框都可以被正确地渲染。
内容居中
对话框的内容可以居中。
将center设置为true即可使标题和底部居中。 center仅影响标题和底部区域。 Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。 如果需要内容也水平居中，请自行为其添加 CSS 样式。
TIP
Dialog 的内容是懒渲染的——在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。 因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
居中对话框
从屏幕中心打开对话框。
设置 align-center 为 true 使对话框水平垂直居中。 由于对话框垂直居中在弹性盒子中，所以top属性将不起作用。
关闭时销毁
启用此功能时，默认栏位下的内容将使用 v-if 指令销毁。 当出现性能问题时，可以启用此功能。
需要注意的是，当这个属性被启用时，在 transition.beforeEnter 事件卸载前，除了 overlay、header (可选)与footer(可选) ，Dialog 内不会有其它任何其它的 DOM 节点存在。
可拖拽对话框
试着拖动一下header部分吧
设置 draggable 属性为true以做到拖拽 设置 overflow为 true 可以让拖拽范围超出可视区。
可伸缩模式
设置 resizable 属性后，用户可以拖动右下角的边缘来伸缩对话框的大小，同时提供了最大化和最小化的功能。
API
Dialog Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value/v-model | 是否显示Dialog | boolean | - |
| title | Dialog对话框的标题 | string | - |
| width | 对话框的宽度 | string | number | 50% |
| fullscreen | 是否全屏显示Dialog | boolean | false |
| top | dialog CSS中的margin-top值 | string | 15vh |
| modal | 是否显示遮罩层 | boolean | true |
| modal-class | 自定义遮罩层类名 | string | '' |
| append-to-body | Dialog自身是否插入至body元素上。嵌套的Dialog必须指定该属性并赋值为 true | boolean | false |
| append-to | Dialog挂载到哪个DOM元素，将覆盖append-to-body | string | HTMLElement | body |
| lock-scroll | 是否在Dialog出现时将body滚动锁定 | boolean | true |
| open-delay | 延迟打开Dialog，单位为毫秒 | number | 0 |
| close-delay | 延迟关闭Dialog，单位为毫秒 | number | 0 |
| close-on-click-modal | 是否可以通过点击遮罩层关闭Dialog | boolean | true |
| close-on-press-escape | 是否可以通过按下ESC关闭Dialog | boolean | true |
| show-close | 是否显示右上角的关闭按钮 | boolean | true |
| before-close | 关闭前的回调，会暂停Dialog的关闭，回调函数内执行done参数方法的时候才是真正关闭对话框的时候 | Function | - |
| draggable | 是否可以通过拖动Dialog进行位置调整 | boolean | false |
| overflow | 拖动范围可以超出可视区 | boolean | false |
| center | 是否将Dialog的内容居中 | boolean | false |
| align-center | 是否水平垂直对齐对话框 | boolean | false |
| destroy-on-close | 是否在Dialog关闭时销毁其中的元素 | boolean | false |
| close-icon | 自定义关闭图标 | string | Component | - |
| z-index | 和原生的CSS的z-index相同，改变z轴的顺序 | number | - |
| auto-focus-first | 是否自动聚焦第一个 input 或 textarea 元素 | boolean | false |
| auto-focus-to | 弹窗打开后自动聚焦的目标input元素，支持元素选择器、ref等参数，如果传入的元素不为input或textarea，则聚焦到其后代的第一个input元素 | string | Element | Ref<ComponentInstance> | - |
| resizable | 是否可以调整大小 | boolean | - |
| show-resize-handles | 是否显示默认调整大小句柄 | boolean | true |
Dialog Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| open | Dialog打开的回调 | Function |
| opened | Dialog打开动画结束时的回调 | Function |
| close | Dialog关闭的回调 | Function |
| closed | Dialog关闭动画结束时的回调 | Function |
| open-auto-focus | 输入焦点聚焦在Dialog内容时的回调 | Function |
| close-auto-focus | 输入焦点失去时Dialog内容的回调 | Function |
Dialog Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| resetPosition | 重置Dialog位置 | Function |
Dialog Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | Dialog的内容 | - |
| header | 对话框标题的内容，会替换标题部分，但不会移除关闭按钮 | - |
| footer | Dialog按钮操作区的内容 | - |