ElementUI（全局｜局部）禁止点击遮罩层关闭el-dialog弹窗

最新推荐文章于 2024-03-18 17:28:02 发布
最新推荐文章于 2024-03-18 17:28:02 发布
阅读量2.4k 收藏 3
点赞数 3
分类专栏： ElementUI vue 文章标签： elementui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44711316/article/details/120968545
版权

第一种：全局禁止点击遮罩层关闭el-dialog弹窗
在main.js里面：

import ElementUI from 'element-ui';
ElementUI.Dialog.props.closeOnClickModal.default = false

第二种：局部 单独给某个dialog设置禁止点击遮罩层关闭el-dialog弹窗

<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  :close-on-click-modal ="false" //设置此参数为false，就能禁止点击遮罩层关闭弹窗
  center>
</el-dialog>
一颗青柠~
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
elment ui 组件bug总结
IT博客技术分享
04-04 2269
一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗 第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置 在mian.js里面： import Elem.
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!...
全局设置element-ui Dialog组件的close-on-click-modal属性为false
m0_46815188的博客
10-12 1246
前言 element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 属性 可通过close-on-click-modal属性值来控制，实例如下： 全局配置 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 默认主题 //全局修改默认配置，点击空白处不能关闭弹窗 ElementUI.Dialog.props.clos.
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
liuzaixi的博客
03-18 803
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
element-ui中dialog弹窗关闭按钮失效的解决
01-18
如下所示： <el title=修改库存 visible.sync=kcDialog close=kcDialog> ... </el> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识：webpack外部扩展，依赖前置 引入了外部js index.html <script src=https://code.jquery.com/jquery-3.1.0.js integrity=sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=
【vue 】element配置全局或单个Dialog点击遮罩不关闭
向着光芒的女孩
02-10 4172
在很多编辑信息弹框，尤其后台管理系统，如果一点击遮罩关闭弹窗，再次点开弹窗又做了重置表单的操作会导致用户操作数据丢失，可以设置点击遮罩不关闭弹窗。
element Dialog :close-on-click-modal=“false“
蓝胖子的博客
12-21 5234
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 属性 el-dialog中close-on-click-modal含义是：点击空白处是否关闭，默认true 点击空白处不关闭弹框 只需要 :close-on-click-modal=“false” 即可 ...
【element-plus】el-popover 点击其他区域关闭弹出框
一枚小趴菜(´▽`)ﾉ
11-27 8563
但是如果绑定了visible，那么弹出框所有的弹出隐藏都必须手动控制 ，也没有点击空白处隐藏弹出框了。所以还是不设置visible属性。需求：用户点击按钮，弹出框出现，弹出框里有确认&取消按钮，点击确认&取消&其他区域，弹出框消失。链接：https://www.jianshu.com/p/3b2380a3920d。可以通过绑定弹出框的ref，来通过ref的value.hide()实现手动隐藏。商业转载请联系作者获得授权，非商业转载请注明出处。
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
weixin_69811594的博客
03-17 4415
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
设置所有内容不可编辑
weixin_46183811的博客
04-12 792
您可以使用一个变量来控制是否启用只读模式，并将该变量绑定到对话框的v-bind:close-on-click-modal和v-bind:lock-scroll属性上，以防止用户点击模态框和滚动页面。要将按钮设为不可点击状态，可以使用该组件的disabled属性。
Elementui，通过Dialog，实现全局动态confirm自定义弹窗，不需要各页面单独引入组件（可显示页面、html、代码高亮显示、普通文字）
qq_40591925的博客
06-23 9431
Elementui，通过el-dialog，实现confirm 弹窗
ElmentUI全局禁止点击遮罩层关闭el-dialog弹窗
m0_49494051的博客
09-23 313
在mian.js里面： import ElementUI from 'element-ui'; // 修改 el-dialog 默认点击遮照为不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false;
vue中Dialog和MessageBox点击遮罩关闭的全局设置
weixin_44761131的博客
08-10 308
【代码】vue中Dialog和MessageBox点击遮罩关闭的全局设置。
ElmentUI禁止点击遮罩层关闭el-dialog弹窗、对话框滑动不消失功能
Lydia
08-05 1932
ElmentUI全局禁止点击遮罩层关闭el-dialog弹窗、对话框不消失功能、显示弹框时，设置页面滚动条仍然可以滚动。
Vue + Element UI 对话框外部呈锁定状态方案
热门推荐
欲变世界，先变其身
12-16 1万+
使用对话框组件时，弹出对话框时，点击以外的区域会导致对话框关闭，正确的用户体验应该是只有在点击关闭按钮或者是其他操作性按钮才能使得对话框状态变为关闭。
ElementUi中实现点击Dialog对话框不关闭效果
weixin_46178852的博客
12-12 1180
最近用到了Elementui 中的dialog的组件，当出现对话框的时候我点击遮罩层就把对话框已经关闭了，而需要实现的效果是点击遮罩层对话框不允许关闭的。最终的解决方案是需要在main.js中加入如下代码即可： //配置dialog组件点击遮罩层不关闭 Element.Dialog.props.closeOnClickModal.default = false; ...
el-dialog弹窗高度设置
最新发布
04-11
el-dialog是Element UI中的一个组件，用于创建弹窗。要设置el-dialog弹窗的高度，可以通过以下几种方式实现： 1. 使用CSS样式：可以通过给el-dialog添加自定义的CSS类，并在CSS中设置该类的高度属性来控制弹窗的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值