element ui 弹窗嵌套 蒙层被遮挡（也适用Drawer 抽屉）

已于 2022-08-22 19:01:30 修改
阅读量1.2k 收藏
点赞数 5
文章标签： vue.js 前端 javascript
于 2022-08-22 19:00:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57980267/article/details/126471768
版权

Element - The world's most popular Vue UI framework

打开element认真看多层嵌套  

必须要给二级弹窗赋 :append-to-body="true"

  还有假设赋值了也不行的话 设置 :modal-append-to-body="false" 

 

 自己在实际开发中碰到了这个问题    希望对你有所帮助

不想打工的打工人
关注
element抽屉el-drawer被其他内容覆盖的解决方法
qq_44472859的博客
02-01 4971
element抽屉el-drawer被其他内容覆盖的解决方法 遮罩和下层的内容覆盖在了抽屉之上. 解决办法是修改append-to-body和modal-append-to-body属性，把抽屉插入至 body 元素上，把遮罩插入至抽屉的父元素上，具体代码： <el-drawer :append-to-body="true" :modal-append-to-body="false" ></el-drawer> element官方的说明：
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 4861
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
【前端】去掉el-drawer遮罩层，不影响其他位置点击的方法，亲测可用
升级迭代
12-28 3239
抽屉控件的遮罩层，我觉得他黑漆漆的不好看，想换个颜色，可是没找到方法，又不想要遮罩层！于是乎，我更改遮罩层宽度，做了一系列调整，使得遮罩层不会影响其他地方的点击！于是乎，关闭modal（本质上，只是遮罩层颜色透明了，还是会影响页面交互）
element-ui dialog 嵌套
最新发布
qq_37309987的博客
07-16 274
dialog 内部嵌套 dialog，内层的 dialog 层级显示会遮罩在内容的 dialog 内容区域之上，内层 dialog 添加 append-to-body 属性即可，如官方文档：
elementui弹窗里面出弹窗有一层遮罩问题
m0_47177307的博客
04-06 1061
当在 Element UI 的弹窗组件中打开另一个弹窗时，可能会出现多层遮罩的问题。这可能导致用户界面不友好，并且影响用户体验。
elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTree"）
CuiCui_web的博客
09-07 2542
本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题： 弹窗套弹窗出现蒙层、 弹窗套弹窗，子弹窗执行保存（确定）按钮之后还要执行取消按钮、 弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c...
elementui 弹窗遮罩问题；Message层级问题（被遮罩、弹窗遮住，设置层级；弹窗内容被遮罩遮挡）
热门推荐
IT_dabai的博客
07-22 1万+
解决弹窗内容被遮罩遮住、弹窗层级样式不够问题 情况一：弹窗层级样式不够。elementui文档上，Message板块有写到可以提供自定义class。通过自己设置类名，可以对其设置相关css属性。 情况二： 弹窗内容被遮罩遮住。
element 弹框层级问题
zzh990822的博客
04-25 2478
《1》出现的问题 当你点击一个事件出现一个弹框后再点击弹框内的按钮 出现另一个弹框 但是最后出现的弹框会被上一个弹框覆盖 //添加append-to-body就可以个 <el-dialog append-to-body>
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
vue中使用element ui的弹窗与echarts之间的问题详解
10-16
在Vue.js应用中，结合Element UI和ECharts进行开发时，可能会遇到一些特定的问题，尤其是在使用Element UI的弹窗组件（如`el-drawer`）内嵌ECharts图表时。本文将深入探讨这个问题，并提供解决方案。 首先，问题的...
Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭
金蕊泛流霞
09-26 3969
我们只需要设置这两个 append-to-body :close-on-click-modal="false" 属性。
VUE组件中的 Drawer 抽屉实现代码
10-16
Vue组件中的Drawer抽屉是一种常见的交互组件，它允许开发者在页面上实现一种侧边滑出的交互效果，类似于抽屉的打开与关闭。通过使用Vue.js框架，开发者可以通过自定义组件的方式实现Drawer抽屉效果。在实现过程中，...
element多个弹窗层级问题
Haines
11-26 4915
问题： 我想让抽屉在最上面，但是被遮罩挡住了 解决： <!-- 新建编辑流量分层页面抽屉 --> <el-drawer title="策略管理" :append-to-body="true" :visible.sync="flowDrawerFlag" :before-close="closeDrawer" direction="rtl" custom-class="ad-drawer"
解决element 弹窗屏幕变灰的问题（双层弹窗）（遮罩层问题）
weixin_49376462的博客
07-04 7614
新增按钮弹窗，新增按钮里需要选择部门，又一个弹窗，此时点第二个弹窗的时候页面会灰。model-append-to-body属性是是否让遮罩层插入body上面，如果为false，则遮罩层是在父元素身上的。
element dialog弹出框层级错乱问题
魏知非的博客
07-28 1443
需要加modal-append-to-body 默认为true，遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上。出现弹框层级错乱问题时可以modal-append-to-body是否设置为false了。为false时的HTML结构。为true时的HTML结构。
elementUI 过渡动画 蒙层效果
朝花夕拾的博客
04-27 4666
elementUi 元素淡入的方式有两种： 1.el-fade-in-linear 2.el-fade-in 使用方法： 在要使用该淡入效果的标签外层嵌套<transition>标签，并添加name属性，属性值为el-fade-in-linear 或 el-fade-in 例如蒙层效果 <transition name="el-fade-in"> &l...
elementui两层弹窗遮罩问题
qq_39187822的博客
03-11 1576
elementui两层弹窗遮罩问题 问题原因： 1.没有加modal-append-to-body 跟 append-to-body属性. 2.内层dialog没有真正关闭 解决方法： 1.内层在el-dialog加append-to-body 2.外层在el-dialog加:modal-append-to-body=“false”
element-ui的drawer组件嵌套，关闭一层后遮罩层未关闭
qhs320684的博客
02-19 647
drawer嵌套遮罩层无法关闭问题
解决element中对话框遮挡的问题，让你的页面更美观
Shids_的博客
11-04 3299
解决element中对话框遮挡的问题，让你的页面更美观
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值