Dialog 对话框

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

基础用法

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

TIP

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

自定义内容

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

自定义头部

header 可用于自定义显示标题的区域。为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。

嵌套的对话框

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

内容居中

对话框的内容可以居中。

TIP

Dialog 的内容是懒渲染的——在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

居中对话框

从屏幕中心打开对话框。

关闭时销毁

启用此功能时，默认栏位下的内容将使用 v-if 指令销毁。当出现性能问题时，可以启用此功能。

可拖拽对话框

试着拖动一下header部分吧

TIP

当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true，由于 Dialog 使用 position: relative 定位，当外层的遮罩层被移除时，Dialog 则会根据当前 DOM 上的祖先节点来定位，因此可能造成定位问题。

全屏

设置 fullscreen 属性来打开全屏对话框。

TIP

如果 fullscreen 为 true，则 width、top 和 draggable 属性无效。

模态框

将 modal 设置为 false 会隐藏对话框的模态（覆盖层）。

从版本 2.10.5 起，新增了 modal-penetrable属性，该属性可设置为“可穿透”（即允许穿透）。

自定义动画 2.10.5

通过 transition 属性自定义对话框动画，该属性可以接受以下任意一种值：

动画名称（字符串）
Vue 过渡配置（对象）

TIP

动画类会根据过渡名称动态生成。为了更细致地控制动画行为，你可以明确地定义这些类。详情请参见自定义过渡类（custom-transition-classes）。

Events

打开开发者控制台(ctrl + shift + J)，查看事件的顺序。

API

Attributes

属性名	说明	类型	默认
model-value / v-model	是否显示 Dialog	`boolean`	你好
title	Dialog 对话框 Dialog 的标题，也可通过具名 slot （见下表）传入	`string`	''
width	对话框的宽度，默认值为 50%	`string` / `number`	''
fullscreen	是否为全屏 Dialog	`boolean`	false
top	dialog CSS 中的 margin-top 值，默认为 15vh	`string`	''
modal	是否需要遮罩层	`boolean`	true
modal-penetrable 2.10.5	是否允许穿透遮罩层。 modal 属性必须为 `false`。	`boolean`	false
modal-class	遮罩的自定义类名	`string`	—
header-class 2.9.3	header 部分的自定义 class 名	`string`	—
body-class 2.9.3	body 部分的自定义 class 名	`string`	—
footer-class 2.9.3	footer 部分的自定义 class 名	`string`	—
append-to-body	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 `true`	`boolean`	false
append-to 2.4.3	Dialog 挂载到哪个 DOM 元素将覆盖 `append-to-body`	`CSSSelector` / `HTMLElement`	body
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	`boolean`	true
open-delay	dialog 打开的延时时间，单位毫秒	`number`	0
close-delay	dialog 关闭的延时时间，单位毫秒	`number`	0
close-on-click-modal	是否可以通过点击 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 2.5.4	拖动范围可以超出可视区	`boolean`	false
center	是否让 Dialog 的 header 和 footer 部分居中排列	`boolean`	false
align-center 2.2.16	是否水平垂直对齐对话框	`boolean`	false
destroy-on-close	当关闭 Dialog 时，销毁其中的元素	`boolean`	false
close-icon	自定义关闭图标，默认 Close	`string` / `Component`	—
z-index	和原生的 CSS 的 z-index 相同，改变 z 轴的顺序	`number`	—
header-aria-level a11y	header 的 `aria-level` 属性	`string`	2
transition 2.10.5	对话框动画的自定义过渡配置。可以是一个字符串（过渡名称），也可以是一个包含 Vue 过渡属性的对象。	`string` / `object`	dialog-fade
custom-class deprecated	Dialog 的自定义类名	`string`	''

WARNING

custom-class 已被弃用, 之后将会在 2.4.0 移除, 请使用 class.

Slots

插槽名	说明
default	对话框的默认内容
header	对话框标题的内容；会替换标题部分，但不会移除关闭按钮。
footer	Dialog 按钮操作区的内容
title deprecated	与 header 作用相同请使用 header

WARNING

title 已被弃用，并将在 3.0.0 版本中移除，请使用 header 代替。

事件

名称	详情	Type
open	Dialog 打开的回调	`Function`
opened	Dialog 打开动画结束时的回调	`Function`
close	Dialog 关闭的回调	`Function`
closed	Dialog 关闭动画结束时的回调	`Function`
open-auto-focus	输入焦点聚焦在 Dialog 内容时的回调	`Function`
close-auto-focus	输入焦点从 Dialog 内容失焦时的回调	`Function`