Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

TIP

before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 footer 具名插槽里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

自定义内容

对话框的内容可以是任何东西，甚至是一个表格或表单。 此示例显示如何使用在对话框中添加表单和表格。

嵌套的 Dialog

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

居中布局

对话框的内容可以居中。

TIP

对话框的内容会懒渲染，这意味着你传入的 default 插槽的内容不会已开始就呈现到 DOM 上，直到 Dialog 第一次打开为止。 因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

关闭时销毁 DOM 内容

启用此功能时，default 插槽下的内容将会被 v-if 指令销毁。 当您有性能问题时启用此功能。

可拖拽

试着拖动一下header部分吧

TIP

当设置 modal 属性为 false 时，请将 append-to-body 属性设置为 true，因为 Dialog 是通过 position:relative 来确定的位置，一旦移除了 modal 属性，Dialog 会基于当前的 DOM 元素来进行定位， 而不是基于 Document.Body，这会导致样式出现问题。

属性

属性说明类型可选值默认值
model-value / v-model是否显示 Dialogboolean——
titleDialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入string——
widthDialog 的宽度string / number—50%
body-heightDialog body 的高度, 用途在于, 你如果不不希望弹框 body 的滚动条影响内部滚动条可以设置固定高度, 也可以设置一个'max', 为预设的最大高度'max' / number—-
fullscreen是否为全屏 Dialogboolean—false
topDialog CSS 中的 margin-top 值string—15vh
modal是否需要遮罩层boolean—true
append-to-bodyDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 trueboolean—false
lock-scroll是否在 Dialog 出现时将 body 滚动锁定boolean—true
custom-classDialog 的自定义类名string——
open-delayDialog 打开的延时时间，单位毫秒number—0
close-delayDialog 关闭的延时时间，单位毫秒number—0
close-on-click-modal是否可以通过点击 modal 关闭 Dialogboolean—true
close-on-press-escape是否可以通过按下 ESC 关闭 Dialogboolean—true
show-close是否显示关闭按钮boolean—true
before-close关闭前的回调，会暂停 Dialog 的关闭function(done)，done 用于关闭 Dialog——
draggable为 Dialog 启用可拖拽功能boolean—false
center是否让 Dialog 的 header 和 footer 部分居中排列boolean—false
destroy-on-close当关闭 Dialog 时，销毁其中的元素boolean—false

插槽

插槽名说明
—Dialog 的内容
titleDialog 标题区的内容
footerDialog 按钮操作区的内容

事件

事件名说明参数
openDialog 打开的回调—
openedDialog 打开动画结束时的回调—
closeDialog 关闭的回调—
closedDialog 关闭动画结束时的回调—