一、约定

标题	内容
路由地址	无（组件）
路由页面	src\components\BaseDialog\index.vue
操作权限	无限制
API调用约定	当前组件不进行API调用，仅做展现层控制。

二、属性（Attributes）

组件props传入参数

序号	参数名	类型	必填	说明	默认值
1	show	Boolean	否	弹窗显示状态	false
2	title	String	否	弹窗标题	'Tips'
3	width	String	否	弹窗宽度	'720'
4	defaultFooterShow	Boolean	否	是否显示默认底部按钮	true

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	dialogVisible	ref	弹窗显示状态	false	true,false

三、组件管理

（一）组件事件

组件自身提供的功能

核心功能点，执行的事件关系：

弹窗显示与隐藏

弹窗确认与取消

自定义内容与底部按钮

（二）子组件

使用子组件提供功能

弹窗展示

按钮交互

1. el-dialog组件

提供弹窗基础功能

父→子组件传参

v-model: 弹窗显示状态

title: 弹窗标题

width: 弹窗宽度

destroy-on-close: 关闭时销毁内容

close-on-press-escape: 是否可通过ESC关闭

close-on-click-modal: 是否可通过点击遮罩关闭

子→父事件上报

上报通知	用途	执行内部事件
closed	弹窗关闭	handleClose

2. el-button组件

提供按钮功能

父→子组件传参

type: 按钮类型

color: 按钮颜色

v-prevent-re-click: 防重复点击指令

子→父事件上报

上报通知	用途	执行内部事件
click	点击事件	handleClose/handleConfirm

四、事件方法

核心事件，含数据处理、事件管理等

1. handleClose() 关闭弹窗

触发dialogCancel事件通知父组件

2. handleConfirm() 确认操作

触发dialogConfirm事件通知父组件

五、监听方法（watch）

1. dialogVisible 监听

监听内部弹窗状态变化

通过update:show事件同步到父组件

2. show 监听

监听父组件传入的显示状态

更新内部dialogVisible值

六、插槽（slots）

1. default 默认插槽

用于放置弹窗主体内容

2. customFooter 自定义底部插槽

当defaultFooterShow为false时显示

用于自定义底部按钮区域

BaseDialog二次封装的弹窗组件

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

（二）子组件#

1. el-dialog组件#

2. el-button组件#

四、事件方法#

1. handleClose() 关闭弹窗#

2. handleConfirm() 确认操作#

五、监听方法（watch）#

1. dialogVisible 监听#

2. show 监听#

六、插槽（slots）#

1. default 默认插槽#

2. customFooter 自定义底部插槽#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

（二）子组件

1. el-dialog组件

2. el-button组件

四、事件方法

1. handleClose() 关闭弹窗

2. handleConfirm() 确认操作

五、监听方法（watch）

1. dialogVisible 监听

2. show 监听

六、插槽（slots）

1. default 默认插槽

2. customFooter 自定义底部插槽