一、前言

我们在开发vue页面的时候，经常会需要用到一些el-dialog对话框的场景。比如新增功能、修改详情、上传或下载附件等，在原父页面点击功能按钮弹出对应对话框，一般在操作完之后我们才会去点击关闭或取消按钮，以关闭对话框。然而，有个问题是我们在el-dialog界面操作或编辑时，不小心鼠标点击了外部空白处时，没有点击关闭按钮就发现对话框消失了！导致编辑或修改的信息中途就中断了，如何解决？

二、背景

 element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。

属性

三、解决

解决这个问题也很简单，只需要一行代码即可。在<el-dialog 的定义处添加如下一行代码：

    :close-on-click-modal="false"

只需要添加上述一行代码，即设置该对话框的上述属性值为false，点击空白处不消失。

# vue.js # elementui # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue