解决VUE的对话框el-dialog点击外部消失问题

vue对话框el-dialog点击外部消失

我们在开发vue页面的时候，经常会需要用到一些el-dialog对话框的场景。

比如新增功能、修改详情、上传或下载附件等，在原父页面点击功能按钮弹出对应对话框，一般在操作完之后我们才会去点击关闭或取消按钮，以关闭对话框。

然而，有个问题是我们在el-dialog界面操作或编辑时，不小心鼠标点击了外部空白处时，没有点击关闭按钮就发现对话框消失了！

导致编辑或修改的信息中途就中断了，如何解决？

背景

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

属性

解决

解决这个问题也很简单，只需要一行代码即可。

在<el-dialog 的定义处添加如下一行代码：

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

只需要添加上述一行代码

即设置该对话框的上述属性值为false

点击空白处不消失

vue el-dialog点击空白不关闭

单个控制

<el-dialog :close-on-click-modal="false">
</el-dialog>

全局控制

在main.js中添加

import Element from 'element-ui'
//全局修改默认配置，点击空白处不能关闭弹窗
//一般只需要写入下面这句话就可以,引入是默认带的
Element.Dialog.props.closeOnClickModal.default = false
Vue.use(Element)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。