e-dialog

权限控制拖拽按钮列表插槽

• dialog - 属性

描述

1. 通过 adaptor 适配器 实现各自表单组件
2. 通过配置 v-model 控制对话窗显隐
3. 通过修改 title 设置对话窗标题
4. 可以通过 buttonList category 分组功能实现底部按钮列表切换
5. 通过定义 buttonList showClose close-on-click-modal close-on-click-escape 设置对话框关闭方式
6. 可以通过配置 class width top、align-center modal 属性实现不同样式
7. 可以用过配置 modal 控制遮罩是否存在，配置 draggable 实现对话框可拖拽 ,配置 isLoading 添加加载效果，并设置 setTimeout 设置加载时长
8. 通过 has 控制表单权限

注意事项

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

dialog 属性

<i-props> Props

参数名	描述	类型	默认值
has	弹窗底部按钮权限	string	undefined
adaptor	适配器: drawer iframe	string	undefined
title	标题	string	undefined
model-value (v-model)	弹窗显隐	boolean	false
top	弹窗顶部的距离，margin-top 值，默认为 15vh	string	15vh
width	对话框的宽度，默认值为 50%	number | string	50%
align-center	居中对话框	boolean	true
show-close	是否显示关闭按钮	boolean	false
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	false
close-on-click-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	false
append-to-body	是否插入至 body 元素上	boolean	false
draggable	是否需要拖拽	boolean	false
modal	是否需要遮罩层	boolean	true
destroy-on-close	当关闭 Dialog 时，销毁其中的元素	boolean	false
button-list	底部按钮列表，默认为[确定]、[关闭]按钮。	{ prop: string label: string type?: string }[]	[{ prop: 'ok' }, { prop: 'cancel' }]
category	控制按钮 buttonList 中的分组	string | boolean	undefined
host	文件预览的请求路径	string	undefined
params	文件预览的请求参数	object	undefined
iframe	预览的在线文件地址	string	undefined
is-loading	是否需要等待条	boolean	false
keep-alive	关闭时是否保留弹窗内部组件	boolean	false

width 对话框宽度

buttonList 底部按钮

1. 默认为【确定】、【关闭】按钮，若想去除直接设置空数组[]

category 切换不同的底部按钮

1. 通过配置category属性设置需过滤的按钮
2. 在buttonList属性中添加category属性数组，可以为一个["b"]也可以是多个["a","b"]

关闭对话框

关闭对话框有四种形式，分别是配置关闭按钮、点击对话框右上角[X]按钮、点击对话框外部分、按下Esc键

1. 添加:button-list属性，并配置按钮{ label: '关闭', prop: 'cancel'}，点击按钮即可关闭
2. 添加showClose属性，点击对话框右上角[X]按钮，点击按钮即可关闭
3. 添加close-on-click-modal属性，点击对话框外部分即可关闭
4. 添加close-on-click-escape属性，按下Esc键即可关闭

当showClose为true时，只展示关闭按钮，无全屏按钮。

modal 遮罩

1. 添加:modal属性，默认为true显示遮罩，设置:modal="false"关闭遮罩

draggable 拖拽

1. 指定宽度需要通过配置class，目前支持的宽度
   1. w-400px-e-dialog 2. w-600px-e-dialog 3. w-800px-e-dialog 4. w-900px-e-dialog
   2. w-1000px-e-dialog 6. w-1200px-e-dialog 7. w-1400px-e-dialog 8. w-1800px-e-dialog

isLoading 弹窗等待加载中

1. 通过设置 isLoading
2. 通过暴露的 setLoading 方法可以弹窗状态

const dialog: any = inject('dialog')!
dialog.value.setLoading(true)
dialog.value.setLoading(false)

adaptor（iframe、drawer）

1. 对话框可接入其他文件显示
2. 添加 :iframe属性，并设置iframeRef访问文件地址

1. 对话框显示在右侧

UI

tabList 带有标签页的弹窗

box-borderh-full

对话框内嵌

1. 在
   内部嵌套其他组件

el-dialog 示例

插槽修改头部、脚部

使用插槽对对话框头部、脚部进行设计

1. #header 进行头部设计
2. #footer 进行头部设计

全屏、插入至 body 元素上。

1. 添加 fullscreen属性，为true时全屏显示