2.8 KiB

Raw Blame History

对话框点击外部关闭问题修复说明

问题描述

系统中所有的对话框（el-dialog）都存在一个问题：当用户点击对话框外部的遮罩层区域时，对话框会自动关闭。这会导致用户在填写表单时，如果不小心点击了对话框外部，所有填写的内容都会丢失。

问题原因

Element UI 的 el-dialog 组件有一个属性 close-on-click-modal，其默认值为 true。这意味着默认情况下，点击遮罩层（对话框外部区域）会触发对话框关闭。

解决方案

方案选择

考虑到项目中有大量的对话框（超过20个），如果逐个修改每个对话框添加 :close-on-click-modal="false" 属性，工作量大且容易遗漏。因此采用全局配置方案。

实施步骤

在 src/main.js 文件中，添加全局配置来覆盖 Element UI Dialog 组件的默认行为：

// 全局设置 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 的对话框，包括但不限于：

入库单管理对话框
样品管理对话框
用户管理对话框
角色管理对话框
菜单管理对话框
测试工单对话框
测试流程对话框
等等...

优点

一次修改，全局生效：只需修改一个文件，所有对话框都会应用新的默认行为
维护简单：未来新增的对话框也会自动继承这个配置
用户体验提升：避免用户误操作导致数据丢失
代码简洁：不需要在每个对话框上重复添加相同的属性

特殊情况处理

如果某些对话框确实需要点击外部关闭的功能，可以在该对话框上显式设置：

<el-dialog :close-on-click-modal="true" ...>
  <!-- 对话框内容 -->
</el-dialog>

测试验证

修改后，请测试以下场景：

✅ 打开任意对话框，点击对话框外部区域，对话框不应关闭
✅ 点击对话框右上角的关闭按钮（X），对话框应正常关闭
✅ 点击对话框底部的"取消"按钮，对话框应正常关闭
✅ 点击对话框底部的"确定"按钮，对话框应正常关闭并提交数据
✅ 按 ESC 键，对话框应正常关闭（如果需要禁用此功能，可设置 :close-on-press-escape="false"）

日期

修复日期：2025-12-05

2.8 KiB Raw Blame History Unescape Escape