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

一、前言

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

二、背景

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

属性

三、解决

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序大视界

原创不易,请给点支持和鼓励吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值