el-dialog中点击弹框外的区域不关闭弹窗

最新推荐文章于 2024-09-07 16:08:57 发布
最新推荐文章于 2024-09-07 16:08:57 发布
阅读量5.4k 收藏 6
点赞数 2
分类专栏： elementUI 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51830650/article/details/124698738
版权
在element-ui的el-dialog组件中，通过设置'close-on-click-modal'属性为'false'，可以防止点击弹框外区域关闭弹窗。这是一个解决此类问题的方法。
摘要由CSDN通过智能技术生成

1、设置dialogde

elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭，

Dialog下有个‘close-on-click-modal’属性，该属性默认值为‘True’，作用为：是否可以通过点击 modal 关闭 Dialog。

所以，通过设置Dialog下的close-on-click-modal属性为‘false’，即可解决该问题。

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

2、完整示例代码

<el-dialog title="添加用户" :visible.sync=&
最低0.47元/天 解锁文章
努力学习的男孩
关注
专栏目录
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 1982
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
Vue2 - 完成实现ElementUI中el-dialog弹窗的拖拽功能（宽度高度适配，且关闭后打开位置居中）
前端充电宝
04-28 1405
Vue2 - 完成实现ElementUI中el-dialog弹窗的拖拽功能（宽度高度适配，且关闭后打开位置居中）
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
开发指南060-前端el-dialog小技巧小经验
最新发布
wangbing1125的博客
09-07 262
必须加这个，否则用户点下对外话框外就关闭对话框，引起误解（是不是设计者觉得有用，默认值为true了，感觉是开发者思维和使用着思维不对等）3、 内部引用的组件，要用v-if等于:visible.sync对应的值，否则再次执行时，组件的mounted是不执行的。不设的话，对话框里套对话框会出问题。（也是不知道默认为啥是false，设为false有啥好处）===============持续更新========================4、关闭对话框后，往往需要刷新，这个动作写到close事件里。
element ui点击空白处不关闭弹框 el-dialog
————————————————————————————————
12-17 527
el-dialog默认点击空白处也会关闭弹框 它本身自带这样一个功能 “:close-on-click-modal” 想要关闭这个功能只需要在标签上加这个属性就可以了 <el-dialog title="弹框" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> </el-dialog> ...
el-dialog点击弹框外区域不关闭弹框；
i_am_a_div的博客
10-21 1037
el-dialog点击弹框外区域不关闭弹框；
el-dialog 点击空白处不关闭弹窗
记录技术的小本本
03-11 1528
vue el-dialog 点击空白处不关闭弹窗 想要el-dialog 点击空白处弹框不关闭可以设置： close-on-click-modal=“false” <el-dialog title="弹框空白处不关闭" :visible.sync="dialogVisible1" filterable :close-on-click-modal="false" width="50%"> ...
vue el-dialog点击空白不关闭
Aa_duidui的博客
03-30 2380
单个控制 <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) ...
第六十四：el-dialog设置为点击弹窗以外的区域不自动关闭弹窗
maliyao4233的博客
05-09 980
el-dialog设置为点击弹窗以外的区域不自动关闭弹窗
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 <el title=标题 visible.sync=bind size=small close='closeDialog'> </el> 在标签中加入@close=’closeDialog’ mothods中加入 //关闭...
el-dialog弹框全局增加可拖拽指令
swagLi的博客
06-25 211
elementUI的el-dialog弹框增加任意拖拽功能
ElementPlus的dialog单击dialog区域外不关闭
Yajyaj123的博客
03-24 1332
ElementPlus的dialog单击dialog区域外不关闭
el-dialog弹窗点击空白不消失
weixin_44524835的博客
12-09 2136
设置:close-on-click-modal="false"
el-dialog中点击之外的区域不关闭弹窗
BADAO_LIUMANG_QIZHI的博客
03-30 6154
场景 在页面上显示一个dialog，如果显示的时候点击了弹窗之外的区域则会将dialog关闭。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、设置dialogde elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭， Dialog下有个‘close-on-click-modal’属性，该属性默认..
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
weixin_69811594的博客
03-17 5290
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
【案例1】el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
meng_csdn_的博客
05-06 6930
这里写自定义目录标题 使用场景 在使用Dialog组件时，当点击弹框外的空白处时，仍然会触发关闭弹框事件，一些业务场景不适合使用这种交互，需要只能点击关闭和取消按钮才消失。 方法一 // close-on-click-modal 是否可以通过点击 modal 关闭 Dialog // close-on-press-escape 是否可以通过按下 ESC 关闭 Dialog <el-dialog :close-on-click-modal="false" :clos
element-ui dialog弹窗 设置点击空白处不关闭
qq_33911541的博客
09-06 3998
element-ui dialog弹窗 设置点击空白处不关闭
el-dialog弹框关闭
07-29
所以，当点击取消按钮或确定按钮时，centerDialogVisible会被设置为false，从而关闭el-dialog弹框。 #### 引用[.reference_title] - *1* [使用el-dialog遇到的问题如何关闭弹窗前调用方法]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值