对话框

基于element-plusdialog组件进行了二次封装,在此基础上对一些用法和功能做了封装。

基本用法

基本用法与原组件相同

自定义底部

通过插槽footer可对底部操作栏进行自定义。 如果不需要,可以设置一个空的插槽,或者通过属性no-footer进行控制

滚动条

内置了el-scrollbar,默认最大高度500px,可以通过全局样式进行覆盖。

全屏

对全屏功能进行封装,可以通过need-fullscreen开启右上角的全屏按钮

TIP

全屏状态下内置的滚动条容器的高度固定为100vh - 200px,可以通过全局样式覆盖。

loading状态

针对弹窗内提交表单的场景,可以使用:confirm传递一个回调函数。只要回调函数的返回值是一个Promise,默认的底部插槽会根据Promise的状态来自动切换确认按钮的loading状态。

WARNING

如果设置了confirm属性就不需要监听submit事件了,否则会导致重复触发

命令式

可以通过createDialog的方式,动态创建弹窗。

WARNING

只有通过全局注册才能继承上下文

Dialog 属性

属性说明类型可选值默认值
model-value/v-model控制弹窗显示隐藏boolean-false
no-footer不显示对话框底部的操作栏(对插槽生效)boolean-false
need-fullscreen是否显示右上角的全屏按钮boolean-false
confirm默认footer时,确定按钮的回调函数Function--

Dialog 插槽

名称说明
footer对话框底部的操作栏

Dialog 方法

方法名说明参数类型
setLoading默认footer时,控制确定按钮的loading状态boolean
open打开弹窗-
close关闭弹窗-