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

一、前言

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

二、背景

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

属性

三、解决

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

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

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