窗口Dialog组件

组件效果如上图,基于element-ui
的el-dialog
组件进行封装的,修改了样式,加了很多日常使用的属性及方法。主要用于数据的创建、修改、详情窗口显示。窗口组件内里包含了一个form
组件,所以有很多属性事件方法与form
组件一样
属性
参数 | 说明 | 类型 | 默认值 |
idKey | id值 | string | id |
formTextMode | 是否启用详情样式,默认是以编辑样式处理 | boolean | false |
inDialog | 是否嵌套Dialog,看情况设置,这个没设置好,会导致窗口在遮蔽层下面 | boolean | false |
showSaveButton | 是否显示保存按钮 | boolean | false |
getGuidOnCreate | 的最大高度,超过后会出现坚向滚动条 | boolean | false |
fixedRight | 是否固定在右侧 | boolean | false |
center | 是否在中间 | boolean | false |
hideHeader | 是否隐藏标题头部 | boolean | false |
title | 对话框 | boolean | false |
editTitle | 是否启用编辑标题,会自动根据当前数据是创建还是修改使用对应的标题 | boolean | false |
unit | 数据单位 | string | 记录 |
width | 窗口宽度 | string | undefined |
closeOnSaved | 是否在保存后关闭窗口 | boolean | false |
beforeClose | 在关闭窗口之前调用的函数,函数会传入一个表单状态对象{ isChanged,isSaved,isEdit }跟一个done函数,前台根据情况进行判断,然后调用done()就会关闭窗口 | function | undefined |
formLabelWidth | 窗口里表单的字段标签宽度 | string | 85px |
formRules | 窗口表单的验证规则 | object | |
formLabelPosition | 标签对齐位置 | | |
data | 窗口的数据对象 | object | |
savedMessage | 保存后提示消息 | string | 保存成功 |
initBaseDataFunc | 初始化对话框的基础数据的函数,返回一个Promiss,这函数只会调用一次,比如说表单内有一些下拉列表,需进行加载成功后才可以进行其它操作 | function | |
resetOnClose | 关闭窗口时是否重置表单 | boolean | true |
beforeSave | 保存之前,返回true进行保存,返回false不进行保存 | function | |
confirmOnSave | 是否在保存时弹出确认提示 | boolean | false |
confirmSaveText | 保存确认提示文字 | string | 您确定要保存吗? |
confirmOnCloseChange | 是否在改变数据关闭窗口时进行提示 | boolean | false |
confirmCloseChangeText | 数据改变后关闭窗口时的提示文本 | string | 数据已修改未保存,是否确定要关闭窗口? |
saveButtonText | 保存按钮的文本 | | 保存 |
getDataFunc | 获取数据的函数 | function | null |
saveFunc | 保存数据的函数 | function | null |
事件
事件名 | 说明 | 参数 |
opened | 当窗口被调用open方法打开后,这时会传入open方法传的参数 | |
create-opened | 当窗口被调用openCreate方法打开后,会传入窗口的data数据 | object |
edit-opened | 当窗口被调用openEdit方法打开后,会传入窗口的data数据 | object |
detail-opened | 当窗口被调用openDetails方法打开后,会传入窗口的data数据 | object |
closed | 当关闭窗口后 | |
close-saved | 有保存数据后关闭窗口时,这个满有用的,比如说,我需要保存后关闭窗口才刷新数据,无保存的话就不刷新。 | |
close | 当关闭窗口时 | |
data-got | 当获取详情数据后 | object |
saved | 当数据保存后 | |
方法
方法名 | 说明 | 参数 |
open | 打开窗口 | object |
openCreate | 打开创建窗口 | object |
openEdit | 打开编辑窗口 | object |
openEditById | 打开编辑窗口,传入id | number |
openDetail | 打开详情窗口 | object |
openDetailById | 打开详情窗口,传入id | number |
close | 关闭窗口,传入true为强制关闭 | boolean |
loading | 设置窗口加载状态 | boolean |
change | 更改表单数据的变动状态 | boolean |
reset | 重置窗口数据 | |
setData | 设置窗口数据 | object |
reload | 刷新窗口数据 | |
getData | 获取窗口数据 | number |
formValidate | 验证窗口表单字段 | |
save | 保存窗口数据,传入true为强制保存 | boolean |
clearValidate | 清空表单验证信息 | |
Slots
位置名 | 说明 |
form | 窗口内的表单区域 |
default | 窗口内容 |
footer | 窗口底部的按钮区域 |