element抽屉el-drawer被遮罩层覆盖的解决方法

最新推荐文章于 2024-05-18 12:59:15 发布
最新推荐文章于 2024-05-18 12:59:15 发布
阅读量5.9k 收藏 3
点赞数 4
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changyana/article/details/128032772
版权

如图，加载出来的效果是这样的，被一个蒙层盖住了整个抽屉，点击也无法消失。
在这里插入图片描述

这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。解决方法就是加上如下2行代码

      :append-to-body="true"
      :modal-append-to-body="false"

在这里插入图片描述
element-ui官方有对这两个属性进行说明
在这里插入图片描述

然后就可以实现想要的效果啦！
在这里插入图片描述

ChangYan.
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用DrawerLayout过程中主页面内容被遮住且不能点击的一小解决方案
05-26
前几天，公司一同事让我帮忙解决用DrawerLayout时，DrawerLayout的侧边栏有种像Dialog那样的遮罩效果，而且主页面内容点击不了，他要实现的功能是：去掉遮罩效果，并且主页面内容例如Button之类的能够点击，并且触发点击时，侧边栏不能自动关闭，另外还要有常用的可以滑动侧边栏关闭侧边栏，点击侧边栏的item要能够触发相应的事件的效果，于是就有了以下的博客
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮
06-04
点击按钮弹出悬浮层，层上有数据且可以关闭 页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。 需要显示详情，但是不想从新写一个页面。所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置，防止页面出现错误。
【前端】去掉el-drawer遮罩层，不影响其他位置点击的方法，亲测可用
升级迭代
12-28 2309
抽屉控件的遮罩层，我觉得他黑漆漆的不好看，想换个颜色，可是没找到方法，又不想要遮罩层！于是乎，我更改遮罩层宽度，做了一系列调整，使得遮罩层不会影响其他地方的点击！于是乎，关闭modal（本质上，只是遮罩层颜色透明了，还是会影响页面交互）
vue+el-drawer 常见问题
最新发布
weina1996的博客
05-18 366
1.问题背景 在drawer里套了一个表格，表格绑定了dataList，当修改dataList的值时，表格数据不会刷新，只有关闭drawer且重新打开才能刷新。 解决 在修改dataList值时，先让其赋空表，再赋值 原来代码 this.questionFullList=resp.data.data 修改后` this.questionFullList=[] this.questionFullList=resp.data.data 原文链接：https://blog.csdn.net/weixin_
el-drawer 遮罩在父元素下显示
weixin_40790248的博客
07-04 1057
无
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
vue el-drawer 想要在指定div打开，并且设置自定义的蒙层效果。而且支持嵌套drawer进行设置。
qq_36571836的博客
05-18 3822
2. 然后还要给 el-drawer设置样式 position:absolute;首先设置两个属性也就是隐藏el-drawer自带的蒙层。:modal-append-to-body=“false” // 遮罩层不能插入至 body。:wrapperClosable= “false”, // 点击遮罩层不可关闭drawer。需要 append-to-body： false, 因为设置为true会插入body。:modal=“false” // 不需要遮罩层。在el-drawer出现的实现 出现该蒙层。
Element-UI中的Drawer 抽屉如何关闭
qq_54180801的博客
09-10 5207
Element-UI中的Drawer 抽屉如何关闭
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案，vue在＜el-drawer＞中嵌套＜el-drawer＞时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
G佳伟
09-27 1279
背景：vue项目中多个el-drawer抽屉组件嵌套官方自带遮罩层出现顺序混乱的bug使用了官方自带类 :append-to-body=“true” :modal-append-to-body=“false” 都无法解决后自己定义了一个组件，虽然简陋但是解决了问题。为了解决问题自己封装了一个简易的抽屉组件
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
总的来说，自定义Element UI的Dialog和Drawer组件，以实现无覆盖和可拖拽特性，是提高用户体验和丰富交互设计的一种方法。通过深入理解和实践，开发者可以更好地掌握Vue.js和前端组件化的开发技巧。
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
详解elementui之el-image-viewer(图片查看器)
10-16
在Element UI库中，`el-image-viewer`是一个用于实现图片查看器功能的组件，它提供了方便的图片预览和浏览体验。这个组件是独立于`el-image`组件的，这意味着即使你不直接使用`el-image`，也能单独利用`el-image-...
bottom-drawer:一个固定的底部抽屉 Polymer JS 组件，类似于 Discourse 的回复 composer
06-27
您可以通过 heightPadding 变量调整抽屉打开时添加到抽屉的额外高度 需要为此设置一个组件页面... 在本地运行： 将 repo 克隆到一个空目录中（原因请参见下一个项目符号）& cd 到其中 运行bower install （将安装...
el-drawer抽屉打开遮住目录
qq_43840793的博客
01-30 1216
el-drawer弹出遮住目录
el-drawer 被遮罩层覆盖 显示异常
carbonzhao的专栏
05-17 960
这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。
element-ui el-drawer组件在指定div内打开
qq_2411868438的博客
04-27 8881
写在前面 element-ui组件库中的el-drawer默认是相对整个网页窗口呈抽屉形式打开，如果有开发需求要求在指定的div里面打开呢 具体实现 其实也很简单，核心是设置父元素position:relative或absolute，再设置el-drawer的position:absolute，使它相对于它的父元素定位 部分代码示例： （*注:vue语法环境） <div style="height:680px"> <h2>这里是h2...
element ui 弹窗嵌套 蒙层被遮挡（也适用Drawer 抽屉）
qq_57980267的博客
08-22 1117
还有假设赋值了也不行的话 设置 :modal-append-to-body="false"必须要给二级弹窗赋 :append-to-body="true"自己在实际开发中碰到了这个问题 希望对你有所帮助。打开element认真看多层嵌套。
Element-UI抽屉Drawer，阻止点击遮罩层关闭
weixin_43459945的博客
02-14 5953
场景 项目中遇到点击遮罩层抽屉Drawer不关的需求 解决思路 查看API有这样一个参数 : wrapperClosable 解决办法 设置wrapperClosable为false即可 <el-drawer title="我是标题" :visible.sync="drawer" :wrapperClosable="false" :with-header="false"> <span>我来啦!</span> </el-drawer> &
el-drawer点击遮罩不关闭
09-16
您可以通过设置`wrapper-closable`属性为`false`来实现el-drawer点击遮罩不关闭的效果。具体的代码示例如下： ```html <el-drawer title="我是标题" :visible.sync="drawer" :wrapper-closable="false" :with-header="false"> <span>我来啦!</span> </el-drawer> ``` 在上述代码中，将`wrapper-closable`属性设置为`false`后，点击遮罩层时不会关闭el-drawer组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值