Skip to content

Dialog 对话框

基础使用

设置 value 属性,或绑定 v-model:value,来控制显示隐藏,值为 Boolean 类型。使用 slots.default 默认插槽可以设置内容,而 title 属性可快速设置标题。

宽度控制

默认情况下对话框的宽度是根据默认插槽内容动态调节的,可以对默认插槽进行控制,也可通过设置 width 调节宽度

遮罩

默认情况下,对话框存在灰蒙蒙的遮罩,如果要关闭可以设置 modalfalse

自定义头部

如果想更加定制化对话框的标题或者头部,可以使用 slots.header 插槽

自定义页脚

对话框一般涉及人机交互,需要放置按钮,那么可以使用 slots.footer 插槽

手动关闭

默认情况下点击遮罩层或者按下 ESC 按键,就会触发关闭对话框事件。如果是 v-model:value 进行绑定,那值会进行更新。如果不想用户误操作,可以设置 persistenttrue。这样在点击遮罩层或按 ESC,就不会关闭对话框,同时还会由提示动画效果。

内容过长

当内容过多可以设置自定义内容的样式 overflow: auto,该组件会进行适配,只允许内部滚动,禁止页面滚动。

Dialog API

属性

属性名说明类型默认值是否必填
value是否显示BooleanfalseNo
title标题BooleanfalseNo
modal显示遮罩BooleanfalseNo
width对话框的最大宽度String-No
persistent点击外部和按下 esc 不会关闭BooleanfalseNo

插槽

插槽名说明作用域参数
default自定义内容-
header自定义标题-
footer自定义对话框底部,通常用于放置按钮-