el-drawer被挡住，无法点击任何区域解决办法

于 2024-08-26 11:48:57 发布
阅读量417 收藏 7
点赞数 3
分类专栏： Vue 前端 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zwwxd666/article/details/141560303
版权
前端 同时被 2 个专栏收录
31 篇文章 0 订阅
订阅专栏
Vue
19 篇文章 0 订阅
订阅专栏

效果图

image-20240826114218080

解决

加入如下属性

:append-to-body="true"

image-20240826114540887

官方解释

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

大概是说如果该标签不是最顶层的，而是组件或者标签嵌套的，弹出来的drawer会被父标签的其他元素覆盖

而加了这个可能类似堆汉堡包一样给他盖到最顶上了

Zww0891
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 2925
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组件
el-drawer抽屉组件弹窗遮挡问题解决
宁波阿成的博客
12-01 1132
el-drawer抽屉组件弹窗遮挡问题解决
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
jiangjunyuan168的博客
12-11 2463
在开发 vue3 项目的过程中，使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。
element抽屉el-drawer被其他内容覆盖的解决方法
qq_44472859的博客
02-01 4916
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官方的说明：
【前端】去掉el-drawer遮罩层，不影响其他位置点击的方法，亲测可用
升级迭代
12-28 2993
抽屉控件的遮罩层，我觉得他黑漆漆的不好看，想换个颜色，可是没找到方法，又不想要遮罩层！于是乎，我更改遮罩层宽度，做了一系列调整，使得遮罩层不会影响其他地方的点击！于是乎，关闭modal（本质上，只是遮罩层颜色透明了，还是会影响页面交互）
【已解决】el-drawer外不可点击
程序边界
04-27 3456
文章目录问题场景 问题场景 使用el-draw做一个面板（el-draw衍生于el-dialog），可是面板外不可点，那这一定是样式的问题了。 F12查看源码，果然在外面还有两个外套 直接修改样式： /deep/ .el-drawer__wrapper { width: 400px; .el-drawer__container { width: 400px; over 有问题欢迎留言 ...
element抽屉el-drawer被遮罩层覆盖的解决方法
changyana的博客
11-25 6418
加载出来的效果是这样的，被一个蒙层盖住了整个抽屉，点击也无法消失。这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。
DrawerView 点击穿透解决
一二说
08-28 265
DrawerView 点击穿透解决 侧边栏打开时点击空白处会传递点击事件到底层显示的页面。 fun drawerListen(drawerLayout: DrawerLayout) { drawerLayout.addDrawerListener(object : DrawerLayout.DrawerListener { override fun onDrawerSlide(drawerView: View, slideOffset: Float) { }
el-drawer的入门学习
qq_40765784的博客
08-22 7030
el-drawer入门实例
Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭
金蕊泛流霞
09-26 3929
我们只需要设置这两个 append-to-body :close-on-click-modal="false" 属性。
去除element-ui中el-drawer标题自带黑色框
郭宝的博客
04-21 2133
背景 在使用Element-UI中的 <el-drawer 组件时，出现了默认选中标题的问题，如下截图 解决办法： 如果使用了scss预处理器，那么可以通过 ::v-deep 来修改样式，如下代码： ::v-deep :focus { outline: 0; } 或 /deep/ :focus { outline: 0; } 效果图如下： ...
el-drawer判断是不是点击在空白区域
06-16
在el-drawer组件中，可以通过点击空白区域来关闭抽屉。判断点击是否在空白区域的方法如下： 1. 给el-drawer的容器元素绑定一个click事件监听器，当点击容器元素时触发。 2. 在事件监听器中，判断点击的目标元素...
el-drawer(总结 vue3)
最新发布
qq_38210427的博客
07-26 380
mei。
问题:使用ElementUI时出现遮罩层在弹出层上面
浮梦一场
02-13 4930
解决：在el-dialog上添加:modal-append-to-body="false" 如： &lt;el-dialog title="对话框" :visible.sync="replayWindow" :modal-append-to-body="false" &gt; ... &lt;/el-dialog&gt;  
elementUI Drawer 抽屉 Dialog 对话框 等弹出组件的遮罩层以及多层遮罩解决办法
热门推荐
小糖穿越火线
10-30 1万+
append-to-body 解决多层遮罩层覆盖的问题 <el-dialog title="编辑处理结果" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" append-to-body > :modal-append-to-body=“false” 解决一层遮罩层覆盖问题 <el-dialog title="编辑处理结果" :visible.sync="dialog
DrawerLayout解决点击事件穿透问题
NameiCc
11-26 3902
使用DrawerLayout可以实现侧滑形式的菜单。在点击侧滑菜单的空白区域时，容易出现点击事件的穿透问题。 我是将侧滑菜单的内容单独做成了一个页面，主页面include进来。 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/...
Element-UI抽屉Drawer，阻止点击遮罩层关闭
weixin_43459945的博客
02-14 6099
场景 项目中遇到点击遮罩层抽屉Drawer不关的需求 解决思路 查看API有这样一个参数 : wrapperClosable 解决办法 设置wrapperClosable为false即可 <el-drawer title="我是标题" :visible.sync="drawer" :wrapperClosable="false" :with-header="false"> <span>我来啦!</span> </el-drawer> &
解决vue和element UI中对话框的遮罩层消失
浮生离梦的博客
08-09 8207
解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body='false' 错误分析 1）若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了posit...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值