解决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 微信分享回调iOS和安卓回调出现错误的解决
这篇文章主要介绍了vue 微信分享回调iOS和安卓回调出现错误的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
详解vue 模版组件的三种用法
本篇文章主要介绍了详解vue 模版组件的三种用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue 页面卡死,点击无反应的问题及解决
这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue+Bootstrap实现简易学生管理系统
这篇文章主要为大家详细介绍了Vue+Bootstrap实现简易学生管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-02-02
详解Vue.use自定义自己的全局组件
本篇文章主要介绍了Vue.use自定义自己的全局组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue-cli浏览器实现热更新的步骤
这篇文章主要介绍了vue-cli-浏览器实现热更新,最常用的是webpack-dev-server，它是一个小型的Node.js Express服务器，它使用webpack-dev-middleware来服务于webpack的包，本文结合实例代码介绍的非常详细，需要的朋友参考下吧
2024-03-03
vue中watch监听不到变化的解决
本文主要介绍了vue中watch监听不到变化的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
vue环形进度条组件实例应用
在本文中我们给大家分享了关于vue环形进度条组件的使用方法以及实例代码，需要的朋友们跟着测试下吧。
2018-10-10
Vue3项目中引入ElementUI并使用的示例详解
ElementUI是一个强大的PC端UI组件框架，它不依赖于vue，但是却是当前和vue配合做项目开发的一个比较好的ui框架，本文主要介绍了如何在vue3中引入使用ElementUI，需要的可以参考一下
2023-06-06
vue如何将v-for中的表格导出来
这篇文章主要介绍了vue如何将v-for中的表格导出来,需要的朋友可以参考下
2018-05-05