el-dialog点击空白关闭

### 解决方案

为了防止 `el-dialog` 组件在点击外部空白处时自动关闭，可以通过设置属性来控制这一行为。具体来说，在创建 `el-dialog` 实例时，可以将 `close-on-click-modal` 属性设为 `false`[^2]。

#### 修改实例属性的方法

如果希望仅针对特定的 `el-dialog` 实例禁用此功能，则可以在模板中直接指定该属性：

<el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="提示">
  <!-- 对话框内容 -->
</el-dialog>

这样做的好处是可以灵活地对不同对话框应用不同的交互逻辑而不会影响其他地方使用的相同组件的行为。

#### 全局配置方式

对于需要统一管理的应用场景而言，也可以通过覆盖Element UI默认参数的方式一次性完成设置。这通常是在项目初始化阶段执行的操作:

import Vue from 'vue';
import ElementUI from 'element-ui';

// 禁止 ESC 键关闭弹窗以及点击遮罩层关闭弹窗
ElementUI.Dialog.props.closeOnPressEscape.default = false;
ElementUI.Dialog.props.closeOnClickModal.default = false;

Vue.use(ElementUI);

上述代码片段展示了如何利用 JavaScript 来改变框架级别的选项，从而使得所有的 `el-dialog` 都遵循新的规则[^1]。