Skip to content

c7-dialog 对话框组件

基于 Element Plus 的 el-dialogel-drawer 组件进行封装,支持对话框和抽屉两种模式。

基础用法

最简单的对话框使用方式:

对话框模式

展示对话框模式的各种使用方式:

抽屉模式

展示抽屉模式的各种使用方式:

配置选项

展示不同配置选项的使用:

事件处理

展示事件处理的使用方式:

Attributes

属性名说明类型默认值
visible是否显示对话框Boolean-
footer是否显示底部按钮区域Booleantrue
mode弹框模式String'dialog'
modalProps对话框/抽屉的配置属性Object{}

mode 可选值

说明
dialog对话框模式
drawer抽屉模式

modalProps 配置项

modedialog 时,支持 el-dialog 的所有属性:

  • title:标题
  • width:宽度
  • center:是否居中
  • close-on-click-modal:是否可通过点击遮罩关闭
  • 等等...

modedrawer 时,支持 el-drawer 的所有属性:

  • title:标题
  • direction:方向(rtl/ltr/ttb/btt)
  • size:大小
  • 等等...

Events

事件名说明回调参数
update:visible显示状态变化时触发(visible: boolean)
close关闭对话框时触发-
submit点击确定按钮时触发-

Slots

插槽名说明
default对话框内容区域
footer底部按钮区域(仅在 dialog 模式下有效)

功能特性

  1. 双模式支持:支持对话框和抽屉两种显示模式
  2. 默认按钮:当 footertrue 且未提供 footer 插槽时,显示默认的确定/取消按钮
  3. 自定义配置:通过 modalProps 传递底层组件的所有配置
  4. 事件处理:支持关闭、提交等事件处理

使用说明

  1. 显示控制:通过 v-model:visiblevisible 属性控制显示状态
  2. 模式选择:通过 mode 属性选择对话框或抽屉模式
  3. 自定义配置:通过 modalProps 传递底层组件的配置
  4. 事件监听:监听 submitclose 等事件处理用户操作