Appearance
c7-dialog 对话框组件
基于 Element Plus 的 el-dialog
和 el-drawer
组件进行封装,支持对话框和抽屉两种模式。
基础用法
最简单的对话框使用方式:
对话框模式
展示对话框模式的各种使用方式:
抽屉模式
展示抽屉模式的各种使用方式:
配置选项
展示不同配置选项的使用:
事件处理
展示事件处理的使用方式:
Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否显示对话框 | Boolean | - |
footer | 是否显示底部按钮区域 | Boolean | true |
mode | 弹框模式 | String | 'dialog' |
modalProps | 对话框/抽屉的配置属性 | Object | {} |
mode 可选值
值 | 说明 |
---|---|
dialog | 对话框模式 |
drawer | 抽屉模式 |
modalProps 配置项
当 mode
为 dialog
时,支持 el-dialog
的所有属性:
title
:标题width
:宽度center
:是否居中close-on-click-modal
:是否可通过点击遮罩关闭- 等等...
当 mode
为 drawer
时,支持 el-drawer
的所有属性:
title
:标题direction
:方向(rtl/ltr/ttb/btt)size
:大小- 等等...
Events
事件名 | 说明 | 回调参数 |
---|---|---|
update:visible | 显示状态变化时触发 | (visible: boolean) |
close | 关闭对话框时触发 | - |
submit | 点击确定按钮时触发 | - |
Slots
插槽名 | 说明 |
---|---|
default | 对话框内容区域 |
footer | 底部按钮区域(仅在 dialog 模式下有效) |
功能特性
- 双模式支持:支持对话框和抽屉两种显示模式
- 默认按钮:当
footer
为true
且未提供footer
插槽时,显示默认的确定/取消按钮 - 自定义配置:通过
modalProps
传递底层组件的所有配置 - 事件处理:支持关闭、提交等事件处理
使用说明
- 显示控制:通过
v-model:visible
或visible
属性控制显示状态 - 模式选择:通过
mode
属性选择对话框或抽屉模式 - 自定义配置:通过
modalProps
传递底层组件的配置 - 事件监听:监听
submit
、close
等事件处理用户操作