e-drawer 和 el-dialog 全局配置默认点击遮照不关闭

已于 2024-06-27 22:15:21 修改
阅读量903 收藏 7
点赞数 4
分类专栏： ElementUI 文章标签： vue.js elementui 前端
于 2024-03-27 16:15:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/137081085
版权
本文介绍了如何在main.js中修改ElementUI库，防止el-dialog的默认点击遮罩关闭行为，并设置Element-UIDrawer组件的wrapperClosable属性，以实现全局设置点击遮罩层不关闭的功能。
摘要由CSDN通过智能技术生成
main.js中
import ElementUI from "element-ui";
// 修改 el-dialog 默认点击遮照为不关闭\全局设置点击遮罩层不关闭 Dialog
ElementUI.Dialog.props.closeOnClickModal.default = false
//Element-UI抽屉Drawer，阻止点击遮罩层关闭
ElementUI.Drawer.props.wrapperClosable.default = false
扶苏1002
关注
专栏目录
element ui中el-drawer点击遮罩无法关闭
PinelliaLogic的博客
12-11 1344
element ui中el-drawer点击遮罩无法关闭
使用DrawerLayout过程中主页面内容被遮住且不能点击的一小解决方案
abfo12
05-26 6252
前几天，公司一同事让我帮忙解决用DrawerLayout时，DrawerLayout的侧边栏有种像Dialog那样的遮罩效果，而且主页面内容点击不了，他要实现的功能是：去掉遮罩效果，并且主页面内容例如Button之类的能够点击，并且触发点击时，侧边栏不能自动关闭，另外还要有常用的可以滑动侧边栏关闭侧边栏，点击侧边栏的item要能够触发相应的事件的效果，于是就有了以下的博客 首先，去掉遮罩效果很好实现
关于element抽屉el-drawer被遮罩层覆盖的解决方法
最新发布
m939499的博客
09-25 441
情景：在使用多个弹出抽屉时，当打开第一个抽屉，点击某个部分弹出新的抽屉，然后在关闭新的抽屉后，第一个抽屉会被遮罩层整个覆盖，无法点击也无法取消，只能整体刷新窗口才能正常。这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。解决方法就是加上如下2行代码。
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8525
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
element-ui框架的el-dialog弹出框被遮罩层挡住了
热门推荐
知行合一，跬步致远
07-02 8万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
el-dialog 点击遮罩层就不关闭
2201_75410538的博客
03-06 583
【代码】el-dialog 点击遮罩层就不关闭。
el-dialog点击遮罩层不关闭弹窗
lighting0_0的博客
11-22 3682
原文链接： https://blog.csdn.net/qq_44711316/article/details/120968545?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20dialog%E7%82%B9%E5%87%BB%E9%81%AE%E7%BD%A9%E5%B1%82%E4%B8%8D%E5%85%B3%E9%97%AD%E5%BC%B9%E7%AA%97%20%E5%B1%80%E9%83%A8%
el-dialog 点遮罩层不关闭
qq_16795789的博客
09-04 427
Element UI 的 el-dialog 组件时，默认情况下，如果用户点击对话框外部的遮罩层，窗口会关闭。不过，你可以通过设置 :close-on-click-modal 属性为 false 来禁用这种行为，从而使点击遮罩层不会关闭对话框。
Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭
weixin_51341210的博客
12-02 4049
项目需求问题Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭 Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭 在使用element-ui组件的时，根据项目需求，需要修改组件默认的属性值。 今天根据需求需要组织点击遮罩层关闭组件el-dialog或者el-drawer <el-dialog :title="title" :visible.sync="open" width="500p
vue3中Element-plus全局配置Dialog遮罩层点击不关闭
weixin_50478033的博客
04-25 1682
vue3中Element-plus全局配置Dialog遮罩层点击不关闭
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
1. **创建组件模板**：首先，需要创建一个新的Vue组件，包含Dialog或Drawer的基本结构，包括标题、内容区域和关闭按钮等元素。 2. **引入Element UI**：确保项目中已正确安装和引入Element UI，以便可以利用其提供...
DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭
07-03
DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭
DrawerLayout去除内容阴影，点击内容不关闭抽屉，抽屉默认打开，抽屉滑动时内容区域跟随移动
03-20
DrawerLayout去除内容阴影，点击内容不关闭抽屉，抽屉默认打开，抽屉滑动时内容区域跟随移动
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 3196
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在element ui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2 elementUI el-dialog修改了body样式不生效问题解决方案，element组件
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 5019
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 3259
vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d
element 全局设置点击遮罩层不关闭 Dialog
dujyong的博客
10-25 617
element 全局设置点击 modal 不关闭 Dialog 在main.js添加代码 Element.Dialog.props.closeOnClickModal.default = false; Vue.config.productionTip = false; 完事~
Element-UI中el-dialog打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
2301_76707317的博客
09-27 294
根据官网文档可知，在弹框中添加如下代码即可解决。
vue 子组件 el-dialog弹框点击旁边的遮罩层无法关闭
weixin_45060105的博客
10-09 819
问题：点击el-dialog弹框旁边的遮罩层无法关闭弹框的 原因：style里的样式影响 解决方案：去掉样式
el-drawer嵌套dialog
09-11
el-drawer嵌套dialog是指在Vue.js框架中使用el-drawer组件嵌套el-dialog组件。在这种嵌套关系中，通常会通过点击某个按钮或触发某个事件来打开el-drawer抽屉，并在抽屉中展示el-dialog对话框的内容。在上述代码示例中，父组件中的avue-crud组件包含了一个表格，点击表格中的每一列会触发getRowData方法，该方法会改变父组件中的visible属性的值，从而控制el-drawer组件的显隐。同时，子组件中的el-drawer组件包含了一个el-dialog组件，通过给el-drawer的visible属性绑定父组件中的visible属性，并通过before-close事件和handleClose方法进行关闭操作。这样就实现了el-drawer嵌套dialog的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值