最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue多层弹框时存在遮挡代码解决方法
时间：2022-03-25 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下vue多层弹框时存在遮挡代码解决方法，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
问题：
如上图所示，当存在多层弹框时，点击黄色弹框中红色内容，弹出蓝色弹框时，出现上述情况，即表现出顶层弹框被遮挡的现象，当我们点击蓝色弹框时又会出现遮挡消失的情况，下面将对这一问题提出相应的解决办法。
解决方案：
解决思路，首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，从而解决不同弹框遮挡层在页面的z-index的不同，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误
正确思路：
查看组件中不同属性的作用，我使用的蓝色弹框是使用的element组件中的dialog组件，故此，通过查找该组件中的属性，发现以下三个属性跟遮挡层有关
遮挡层是必须要使用的，故此排除modal，可以通过在dialog弹框中添加modal-append-to-body或者append-to-body来测试是否能解决以上问题，如果是单层遮挡的话，使用第一个，多层遮挡的话，添加第二个，内部原因还未了解清楚。
这是一段信息
-
上一个： Vue3+TS实现语音播放组件代码示例
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12