vue自定义弹窗中，遇到的层级遮罩问题

需求：因为项目中大屏里的弹窗，需要按照页面比例缩小，当浏览器页面缩小时，大屏内容也要跟着缩小。大屏的缩小是根据监听resize函数，然后用 transform 进行缩小，但是由于弹窗用的是element-ui里的dialog组件，这个组件在body之下，不受上面的缩小影响，所以当页面缩小时，弹窗没有随着等比缩小。弹窗内容随着页面缩小而缩小。

解决方案：

1、自定义了弹窗，而不用原来的element-ui里的弹窗。

2、把弹窗内容插入到受transform影响的组件下。

问题点：

在自定义的弹窗过程中，有弹窗中又嵌套了弹窗(组件又嵌套组件)，所以要解决z-index的问题。

当然首先要了解z-index需要注意的一些问题：此部分内容是【CSDN博主「曹梦秋」】的原创文章，原文链接：https://blog.csdn.net/dashuforever/article/details/122545735创作，在此引用并记录：

只有当元素的position为：relative,absolute,fixed等脱离了文档流的定位时，z-index才会生效。

　　在div1中，child1和child2之间层级数越大，越靠前
　　在div1和div2中， div1的层级为1，其内部的遮罩mask层级永远无法遮盖div2，而div2中的mask可以遮盖div1

使用opcity<1属性会形成堆叠上下文。形成的层叠结构在z-index: auto 和 z-index: 1 之间。这也导致，如果同层级元素都设置opcity属性，元素的子元素层级永远无法遮盖其兄弟元素的子元素。

tips: 以下属性都是形成堆叠上下文

根元素 (HTML),

z-index 值不为 "auto"的绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 属性值小于 1 的元素（参考 the specification for opacity），
transform 属性值不为 "none"的元素，
mix-blend-mode 属性值不为 "normal"的元素，
filter值不为“none”的元素，
perspective值不为“none”的元素，
isolation 属性被设置为 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章）
-webkit-overflow-scrolling 属性被设置 "touch"的元素

没有 z-index 时

没有使用 z-index 的时候，元素的层叠关系由2个因素决定：

该元素的position是否是static，如果是static（等同于没有设置 position，因为 static 就是默认值）那么这个元素就称为 non-positioned ；反之，如果 position 值是 relative, absolute, fixed, 或 sticky 则称 positioned。
positioned 元素享受特权，会覆盖 non-positioned 元素。
而 non-positioned 元素中，有 float样式的元素覆盖没有float 的。
元素的“出场”顺序 —— 即在html中的顺序，同类型元素遵循后来者居上的原则。

在这里我是直接把弹窗内容直接插入到所有的父级元素之上，也就是body之下，这样也就不会有层级遮罩的问题。当然这是针对弹窗的。如果是针对其他组件这个方法未必有用。

// 在弹窗组件内的mounted方法中，插入该元素。   
 mounted(){
      this.$nextTick(()=>{
        const fatherDom = document.querySelector(".body-box");
          if(fatherDom.append){
            fatherDom.append(this.$el);
          }else{
            fatherDom.appendChild(this.$el);
          }
      })
    },

在其他嵌套组件中存在遮罩问题时，可采用提高组件所处的父级元素的z-index，不用的时候，可以再降低父级元素的z-index。

参考链接

https://blog.csdn.net/dashuforever/article/details/122545735

https://zhuanlan.zhihu.com/p/340371083 为什么你的 z-index 又不管用了——最通俗易懂的 z-index 的使用讲解

posted @ 2023-04-22 12:19 爱美丽—— 阅读(1031) 评论(0) 收藏举报

刷新页面返回顶部

书中没有颜如玉

vue自定义弹窗中，遇到的层级遮罩问题