解决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中使用axios调用后端接口的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本篇文章主要介绍了vue-resource 拦截器使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了vue使用require.context实现动态注册路由的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
vue子组件中使用window.onresize()只执行一次问题
这篇文章主要介绍了vue子组件中使用window.onresize()只执行一次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
在Vue中使用Bootstrap是常见的前端开发实践之一,结合了Vue的响应式数据绑定与Bootstrap的UI组件和布局系统,能够快速实现现代化的网页应用,本文将详细介绍如何在Vue中使用Bootstrap,从安装到高级使用,涵盖了各种常见的开发场景和技巧,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要介绍了vue滑动吸顶及锚点定位的示例代码,代码简单易懂，非常不错对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
文章主要讨论了在 Vue 开发中实现页面返回停留原位置的多种方案,包括 Vuex、keep-alive、v-show、客户端跳转等,并分别阐述了它们的优缺点和适用情况,强调开发前应周全考虑前端业务和用户体验,根据实际业务选择合适方案,需要的朋友可以参考下2025-03-03
vue3 集成 echarts 最大的坑就是出现了,reactive 的数据 刷新了,但图表缺不会刷新,所以本文就给大家详细的介绍一下vue3集成echarts数据刷新后图表不刷新的解决方法,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue-router 路由基础的详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-10-10
最新评论