解决VUE的对话框el-dialog点击外部消失问题
更新时间：2024年02月29日 14:36:36 作者：程序大视界
这篇文章主要介绍了解决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)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
今天小编就为大家分享一篇在Vue mounted方法中使用data变量详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
解决vue cli4升级sass-loader(v8)后报错问题
这篇文章主要介绍了解决vue cli4升级sass-loader(v8)后报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最近遇到这样的需求点击某一个节点，弹窗，直接定位到点击的节点，高亮并显示数据，下面小编给大家带来了vue table直接定位到指定元素的操作代码,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue打包后,用后端接口报错304、404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
下面小编就为大家分享一篇利用vue和element-ui设置表格内容分页的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue中的input框点击后不聚焦问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue中使用sass实现换肤功能，实现此功能用到了三个主要文件（base.scss、mixin.scss、varibale.scss）,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了VueCli3.0中集成MockApi的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了当启动vue项目安装依赖时报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论