map:
path: /components/dialog/index
弹窗框 HcDialog
HcDialog 基于 element-plus 的 el-dialog 组件封装。
示例
props 参数
| 名称 |
类型 |
默认值 |
可选值 |
说明 |
| ui |
String |
- |
- |
附加 calss 类名 |
| show |
Boolean |
false |
true/ false |
是否显示弹窗 |
| title |
String / Number |
dialog |
- |
弹窗标题 |
| widths |
String |
38rem |
- |
弹窗宽度 |
| loading |
Boolean |
false |
true/ false |
是否 Loading状态 |
| loadingText |
String |
'请求中，请耐心等待...' |
- |
Loading 时显示的提示文字 |
| isClose |
Boolean |
true |
true/ false |
是否显示弹窗关闭 |
| padding |
Boolean |
true |
true/ false |
内容区域是否有边距 |
| isTable |
Boolean |
false |
true/ false |
是否为表格模式的弹窗（固定高度） |
| footer |
Boolean |
true |
true/ false |
是否有底部按钮区域 |
| cancelText |
String / Number |
取消 |
- |
取消按钮的文本 |
| saveText |
String / Number |
提交 |
- |
确认按钮的文本 |
| bgColor |
String |
#f1f5f8 |
- |
弹窗背景颜色 |
| isRowFooter |
Boolean |
false |
true/ false |
是否为栅格模式的底部按钮区域（左右两侧） |
| isFooterCenter |
Boolean |
false |
true/ false |
是否将底部按钮区域的内容居中 |
| isToBody |
Boolean |
false |
true/ false |
是否将弹窗元素挂载到 body 下，涉及到层级问题时，可启用此项 |
| cancelClose |
Boolean |
true |
true/ false |
是否点击取消按钮后，就关闭弹窗。注意，如果再加载状态时，无法关闭 |
emit 事件
| 名称 |
返回类型 |
返回数据 |
说明 |
| close |
Boolean |
false / - |
弹窗关闭事件 |
| cancel |
- |
- |
取消按钮事件 |
| save |
- |
- |
确认按钮事件 |
slot 插槽
| 名称 |
说明 |
| header |
自定义弹窗头部 |
| extra |
自定义弹窗头部右边 |
| footer |
自定义弹窗底部 |
| leftRowFooter |
自定义弹窗底部左边， 需开启 isRowFooter 参数，才生效 |
| rightRowFooter |
自定义弹窗底部右边， 需开启 isRowFooter 参数，才生效 |
