Dialog 对话框

继承el-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部分吧

组件参数

属性名	说明	类型	默认
model-value / v-model	是否显示 Dialog	boolean	—
title	Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入	string	''
width	对话框的宽度，默认值为 50%	string / number	''
fullscreen	是否为全屏 Dialog	boolean	false
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	true
z-index	和原生的 CSS 的 z-index 相同，改变 z 轴的顺序	number	—

Slots

插槽名	说明
default	Dialog 的内容

Events

事件名	说明	Type
open	Dialog 打开的回调	Function () => void
close	Dialog 关闭的回调	Function () => void