88 lines
2.8 KiB
Markdown
88 lines
2.8 KiB
Markdown
# 对话框点击外部关闭问题修复说明
|
||
|
||
## 问题描述
|
||
|
||
系统中所有的对话框（el-dialog）都存在一个问题：当用户点击对话框外部的遮罩层区域时，对话框会自动关闭。这会导致用户在填写表单时，如果不小心点击了对话框外部，所有填写的内容都会丢失。
|
||
|
||
## 问题原因
|
||
|
||
Element UI 的 `el-dialog` 组件有一个属性 `close-on-click-modal`，其默认值为 `true`。这意味着默认情况下，点击遮罩层（对话框外部区域）会触发对话框关闭。
|
||
|
||
## 解决方案
|
||
|
||
### 方案选择
|
||
|
||
考虑到项目中有大量的对话框（超过20个），如果逐个修改每个对话框添加 `:close-on-click-modal="false"` 属性，工作量大且容易遗漏。因此采用**全局配置方案**。
|
||
|
||
### 实施步骤
|
||
|
||
在 `src/main.js` 文件中，添加全局配置来覆盖 Element UI Dialog 组件的默认行为：
|
||
|
||
```javascript
|
||
// 全局设置 el-dialog 默认不允许点击遮罩层关闭
|
||
// 解决所有对话框点击外部区域会关闭的问题
|
||
Vue.component('el-dialog', {
|
||
...Element.Dialog,
|
||
props: {
|
||
...Element.Dialog.props,
|
||
closeOnClickModal: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
### 修改文件
|
||
|
||
- `ruoyi-fastapi-frontend/src/main.js`
|
||
|
||
### 影响范围
|
||
|
||
此修改会影响整个项目中所有使用 `el-dialog` 的对话框，包括但不限于：
|
||
|
||
- 入库单管理对话框
|
||
- 样品管理对话框
|
||
- 用户管理对话框
|
||
- 角色管理对话框
|
||
- 菜单管理对话框
|
||
- 测试工单对话框
|
||
- 测试流程对话框
|
||
- 等等...
|
||
|
||
### 优点
|
||
|
||
1. **一次修改，全局生效**：只需修改一个文件，所有对话框都会应用新的默认行为
|
||
2. **维护简单**：未来新增的对话框也会自动继承这个配置
|
||
3. **用户体验提升**：避免用户误操作导致数据丢失
|
||
4. **代码简洁**：不需要在每个对话框上重复添加相同的属性
|
||
|
||
### 特殊情况处理
|
||
|
||
如果某些对话框确实需要点击外部关闭的功能，可以在该对话框上显式设置：
|
||
|
||
```vue
|
||
<el-dialog :close-on-click-modal="true" ...>
|
||
<!-- 对话框内容 -->
|
||
</el-dialog>
|
||
```
|
||
|
||
## 测试验证
|
||
|
||
修改后，请测试以下场景：
|
||
|
||
1. ✅ 打开任意对话框，点击对话框外部区域，对话框不应关闭
|
||
2. ✅ 点击对话框右上角的关闭按钮（X），对话框应正常关闭
|
||
3. ✅ 点击对话框底部的"取消"按钮，对话框应正常关闭
|
||
4. ✅ 点击对话框底部的"确定"按钮，对话框应正常关闭并提交数据
|
||
5. ✅ 按 ESC 键，对话框应正常关闭（如果需要禁用此功能，可设置 `:close-on-press-escape="false"`）
|
||
|
||
## 日期
|
||
|
||
修复日期：2025-12-05
|
||
|
||
## 相关问题
|
||
|
||
- 入库单详情查看错误（已同时修复）
|
||
- 数据模型字段缺失问题（已同时修复）
|