element 全局设置点击遮罩层不关闭 Dialog

最新推荐文章于 2024-03-30 10:33:05 发布
原创 最新推荐文章于 2024-03-30 10:33:05 发布 · 671 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #elementui

本文介绍如何在Vue项目中全局配置Element UI的Dialog组件，使其在点击遮罩层时不关闭对话框。只需在main.js文件中添加一行代码：Element.Dialog.props.closeOnClickModal.default = false; 并设置Vue.config.productionTip = false;即可实现。
element 全局设置点击遮罩层不关闭 Dialog

在main.js添加代码

Element.Dialog.props.closeOnClickModal.default = false;
Vue.config.productionTip = false;

完事~

Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8934
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法
super码力的博客
06-06 4107
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法，可以使用官方文档里面提供了一个append-to-body的属性解决
e-drawer 和 el-dialog 全局配置默认点击遮照不关闭
qq_44741577的博客
03-27 1375
【代码】e-rawer 和 el-dialog 全局配置默认点击遮照不关闭。
el-dialog点击空白不允许关闭，只能点击关闭和取消按钮才消失
ddf__的博客
01-06 5610
组件时，当点击弹框外的空白处时，仍然会触发关闭弹框事件，一些业务场景不适合使用这种交互，需要只能点击关闭和取消按钮才消失。
element 和naiveui 遮罩层遮罩层可点击穿透事件
qq_41672186的博客
03-30 856
/ 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）1.element UI去掉遮罩层。1.naiveui 去掉遮罩层。
element-ui子弹窗出现遮罩层无法点击
Vitaliner
05-19 1800
问题: 最近在写一个弹窗组件,弹窗组件里面又嵌套着一个弹窗,当打开这个子弹窗时发现会出现一个遮罩层导致无法点击 解决方法: 需要在子弹窗上增加一个append-to-body属性 总结: 平时应该多看看官方文档,以免掉坑 关于弹窗Dialog组件: Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 如果 visible 属性绑定的变量位于 Vuex 的 s
需求：点击弹框外部不关闭弹窗
backey_mi的博客
12-07 1275
1.方法 修改element.js引用代码，在引用组件前修改默认属性. import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; Vue.use(ElementUI); //配置 dialog组件 组件点击遮罩层不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false; Vue.prototype.$axios = axios 2.弹框外
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮
06-04
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。 需要显示详情，但是不想从新写一个页面。所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能...
vue3中如何让element-plus中的el-dialog组件的遮罩层不占满全屏
最新发布
08-14
根据用户需求，用户希望调整Element-Plus的el-dialog组件遮罩层的显示范围，即不让遮罩层全屏显示。根据引用[2]和[3]，我们可以知道遮罩层默认是全屏的（width:100%; height:100%），并且可以通过设置`modal`属性为...
el-dialog上传设置遮罩层
04-02
嗯，用户的问题是关于在Element UI的el-dialog组件中配置上传功能时如何自定义遮罩层。首先，我需要理解用户的具体需求。他们可能在使用el-dialog进行文件上传时，遇到了遮罩层样式的问题，比如颜色、透明度或者层级...
element confirm 执行后 遮罩层还存在
06-11
-引用[4]针对Dialog组件建议设置close-on-click-modal属性为false，这与遮罩层关闭行为相关。-引用[5]讨论了如何用JavaScript主动触发按键（如ESC）关闭弹窗，这在自定义关闭逻辑中可能有用。但Confirm是一个快捷...
新增-删除-利用sync修饰符关闭新增弹层
m0_66430246的博客
03-28 579
删除部门功能实现 删除功能首先我们需要获取数据封装删除接口，注册下拉菜单事件 /** * * 根据id根据部门 删除 delete 新增 post 修改put 获取 get * **/ export function delDepartments(id) { return request({ url: `/company/department/${id}`, method: 'delete' }) } 然后我们需要监听下拉事件，父组件监听事件 <el-
elementui-＜el-dialog＞出现多个弹窗时出现蒙层的问题解决
护着我的发际线的博客
01-11 2989
1.父级弹窗中-:modal-append-to-body="true" 加上这句语法 <el-dialog :title="title" width="70%" :visible.sync="dialogTableVisible" :modal-append-to-body="true" > </el-dialog> 2.子级弹窗中- :modal-append-to-body="true" :append-to-b
element Dialog :close-on-click-modal=“false“
蓝胖子的博客
12-21 6176
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 属性 el-dialog中close-on-click-modal含义是：点击空白处是否关闭，默认true 点击空白处不关闭弹框 只需要 :close-on-click-modal=“false” 即可 ...
element ui 弹出组件的遮罩层以及多层遮罩解决办法
热门推荐
weixin_44745683的博客
09-25 1万+
做项目中遇到几次弹出框遮罩层的问题。有嵌套的 弹出框。还有单页面中tabs标签页的弹出框。今天就说一下tabs中的弹出框遮罩层的问题。 这个页面有五个tabs页签，每一个都有弹出框组件，也就是说每一个都有遮罩层。 很有趣的问题： 我在第五个tabs页签中打开弹出框，没问题。可以正常使用。当我在第四个tabs页签中打开弹出框时，会出现上图这种情况，（鼠标点击一下，一层遮罩就会消失）。当我在第一个页...
【vue 】element配置全局或单个Dialog点击遮罩不关闭
向着光芒的女孩
02-10 4830
在很多编辑信息弹框，尤其后台管理系统，如果一点击遮罩关闭弹窗，再次点开弹窗又做了重置表单的操作会导致用户操作数据丢失，可以设置点击遮罩不关闭弹窗。
el-element中解决Dialog 对话框点击非内容区域关闭的问题
在无知中学习，在学习中成长，在成长中学习
07-14 1252
el-element中解决Dialog 对话框点击非内容区域关闭的问题
点击dialog关闭按钮无效
Heartnottowake的博客
10-11 815
visible改成:visible.sync。
element中el-dialog的:visible.sync理解
graciedu的博客
06-29 1万+
elementui中el-dialog的:visible.sync理解
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值