多层drawer 导致的层级覆盖问题

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

iviewUI中的Drawer组件大家都经常用，如果你的项目足够复杂，会有多层Drawer嵌套使用的场景。今天发现在多层嵌套时会导致层级覆盖的问题。
Drawer组件官方支持transfer是否将抽屉放置于 body 内 默认值是 true
在这里插入图片描述
这个属性会使得页面中的由Drawer组件生成的node节点，全部放在body中同级存在。为了保证Drawer的效能，node节点并不会在关闭时销毁，所以Drawer的加载顺序会决定Drawer的层级。当我们在嵌套使用时，经常会误以为组件没有更新，但其实不然。

网上有问题说给Drawer组件绑定class，并设置z-indx，我个人实验没有效果（会导致遮罩层的层级问题，可能和我的业务有关系，没有细看）

解决方案是给被嵌套的Drawer组件设置 transfer:‘false’，如果是vue项目的话，你需要写成:transfer=“false”，这样被嵌套的组件生成的node节点就会被父级包裹（不是在其他drawer的同级了）

到这里问题就解决了，但是我这边在父级的Drawer中还有用wangEditor生成的一个富文本编辑器，默认情况下编辑器内置会将当前node的z-index设置成10000，简单看了api，好像还不支持配置（真是个奇葩）。那只能修改我们被嵌套的Drawer的层级了，给Drawer组件绑定class，并设置z-indx:10001

到这里就解决了，虽然功能点很小，但常在河边走，哪能保证鞋不湿呢?

祖传做年糕
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iview Drawer 抽屉置于body内与组件内元素同级
weixin_44167504的博客
05-21 1145
iview Drawer 抽屉置于body内 主要实现的是使抽屉不占整个屏幕而与body内的元素一致大小，将inner打开，关闭transfer <Drawer :title="DrawerTitle" class-name="drawerSty" :mask="true" :closable="true" width="60" v-model="DrawerShow" :inner="true" :transfer="false"> ...
解决el-dialog嵌套在el-popover中但是遮罩层不对的问题
记事本
05-24 3917
当我把el-dialog嵌套在el-popover中，点击打开dialog时，发现整个页面变暗，并不是除了dialog窗口之外的都变暗 这个问题是因为el-dialog和el-popover之间的层级关系，当我把el-dialog嵌套在el-popover中，dialog就挂在了el-popover上，如果想要实现当dialog窗口出现时，它是亮的，其他页面都变暗，就需要将el-dialog拉到body上 在el-dialog中的介绍这个属性默认是false，写的时候给dialog加上这个属性就好了 .
vue+el-drawer 常见问题
最新发布
weina1996的博客
05-18 389
1.问题背景 在drawer里套了一个表格，表格绑定了dataList，当修改dataList的值时，表格数据不会刷新，只有关闭drawer且重新打开才能刷新。 解决 在修改dataList值时，先让其赋空表，再赋值 原来代码 this.questionFullList=resp.data.data 修改后` this.questionFullList=[] this.questionFullList=resp.data.data 原文链接：https://blog.csdn.net/weixin_
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案，vue在＜el-drawer＞中嵌套＜el-drawer＞时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
G佳伟
09-27 1298
背景：vue项目中多个el-drawer抽屉组件嵌套官方自带遮罩层出现顺序混乱的bug使用了官方自带类 :append-to-body=“true” :modal-append-to-body=“false” 都无法解决后自己定义了一个组件，虽然简陋但是解决了问题。为了解决问题自己封装了一个简易的抽屉组件
iView中Drawer抽屉使用过程中遇到的问题(draggable )
从入门到放弃的博客
12-25 5424
iView官方api https://www.iviewui.com/components/drawer#API 在使用的过程中发现如果使用了抽屉的draggable功能进行抽屉的宽度调整，再次打开抽屉，其宽度变成了调整后的宽度。在多处地方调用抽屉的情况下，设置宽度的初始值不再有效。解决方案如下 <Drawer :closable="true" :mask-cl...
element ui 弹窗嵌套 蒙层被遮挡（也适用Drawer 抽屉）
qq_57980267的博客
08-22 1128
还有假设赋值了也不行的话 设置 :modal-append-to-body="false"必须要给二级弹窗赋 :append-to-body="true"自己在实际开发中碰到了这个问题 希望对你有所帮助。打开element认真看多层嵌套。
vue el-drawer 想要在指定div打开，并且设置自定义的蒙层效果。而且支持嵌套drawer进行设置。
qq_36571836的博客
05-18 3909
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+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
Drawer.rar
05-03
针对Android的抽屉技术，此demo考虑了具体的用户业务逻辑和目前Android开发环境的一些注意事项，采用了AndroidX，而不是support，更加与时俱进，也是目前比较常用的抽屉模型，望采纳。
VUE组件中的 Drawer 抽屉实现代码
10-16
主要介绍了VUE组件 之 Drawer 抽屉 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-drawer_drawer_vue展示_vue_
09-30
在Vue生态系统中，"vue-drawer"通常是指一个可滑出的侧边栏组件，类似于手机应用中的抽屉菜单，它提供了一种空间高效的导航方式。这个组件允许从屏幕边缘滑出，显示额外的信息或功能，而不会遮挡主要内容。在本案例...
Android抽屉导航Navigation Drawer实例解析
09-02
主要为大家详细介绍了Android抽屉导航NavigationDrawer实例，感兴趣的小伙伴们可以参考一下
elementUI Drawer 抽屉 Dialog 对话框 等弹出组件的遮罩层以及多层遮罩解决办法
qq_17859117的博客
06-23 711
elemenui drawer 中的dialog对话框遮罩层会被覆盖。
elementUi中的popover嵌套导致弹窗不能自动关闭
An滴饭儿的博客
04-16 3040
问题描述： 组件A中有个弹窗el-popover，这个弹窗里面引入子组件B，B中又有弹窗el-popover，这样相当于是popover嵌套，导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭，看效果： 这个问题在网上差了好久，什么‘popover嵌套导致的问题’等等啊，竟然没有一篇这个问题的文章，看来也挺冷门的，于是打算自己尝试改一下，中间的复杂过程就不说了，最后的解决方案如下： 因为无论是第一级的popover，还是嵌套的，都在body上，平级显示，所以不能区分出来，给嵌套的子
vue中使用iview的modal弹窗嵌套modal出现格式错误的问题
upStar1的博客
07-04 1431
问题：一个全屏modal，点击按钮，再弹出一个modal，就会出现这种格式问题。 解决：搜了一下，说是因为modal的使用是平级的，z-index都是1000，所以后面的会覆盖前面的。不知道是不是因为这个，因为我把嵌套的这个modal改成全屏的，就没有问题了。解决办法是说给modal加一个类名， z-index改一下就行了，除了要改嵌套modal（以下简称modal2）的z-index，modal2的mask（阴影）也需要改。......
vue element-ui 封装drawer 抽屉组件
pengboran的博客
10-23 5245
子组件 <template> <div class="com"> <el-drawer title="我是标题" :visible.sync="drawer_" :direction="direction"> <span>我来啦! {{task.name}}</span> </el-drawer> </div> </template> &l
element Drawer 抽屉里面嵌入子组件，子组件中图片无法回显
艾丽的博客
01-18 1764
问题描述 el-drawer里面嵌入子组件factoryForm先打开el-drawer之后才能拿到子组件factoryForm的ref即factoryForm，这个时候子组件factoryForm里面需要回填el-upload里面已经上传的图片，此时图片无法回填 html el-drawer里面嵌入子组件factoryForm <el-drawer ref="drawer" :show-close="false" :title="drawer.title" :visible.sync="drawe
抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现遮挡弹框问题
future_1_的博客
12-01 2055
抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现遮挡弹框问题
el-drawer抽屉打开 echarts图形加载不出问题
06-07
在使用 `el-drawer` 组件打开 `echarts` 图形时，可能会出现图形加载不出的问题。这通常是因为在抽屉打开时，`echarts` 图形的容器元素并没有正确计算其大小，导致图形无法正确显示。 解决方法： 1. 在 `el-drawer` 组件的 `opened` 事件中手动触发 `echarts` 图形的 `resize` 方法，重新计算容器大小。 ``` <template> <el-drawer :visible.sync="drawerVisible" @opened="handleOpened"> <div ref="chartContainer"></div> </el-drawer> </template> <script> import echarts from 'echarts'; export default { data() { return { drawerVisible: false, chartInstance: null }; }, methods: { handleOpened() { if (this.chartInstance) { this.chartInstance.resize(); } }, initChart() { const chartContainer = this.$refs.chartContainer; this.chartInstance = echarts.init(chartContainer); // ... } }, mounted() { this.initChart(); } }; </script> ``` 2. 使用 `echarts` 的 `autoResize` 配置项，自动监听容器大小的变化并重新渲染图形。需要注意的是，该配置项需要在初始化 `echarts` 实例时设置。 ``` <template> <el-drawer :visible.sync="drawerVisible"> <div ref="chartContainer"></div> </el-drawer> </template> <script> import echarts from 'echarts'; export default { data() { return { drawerVisible: false }; }, methods: { initChart() { const chartContainer = this.$refs.chartContainer; const options = { // ... // 设置 autoResize 配置项 autoResize: true }; const chartInstance = echarts.init(chartContainer, null, options); // ... } }, mounted() { this.initChart(); } }; </script> ``` 以上两种方法都可以解决 `el-drawer` 打开 `echarts` 图形加载不出的问题，选择哪种方式取决于具体需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值