vue 多个遮罩层 只显示最高层

效果如下：

这里有三个弹窗 但遮罩层只有最新打开的弹窗有

具体实现

首先统一 弹窗遮罩层的类名 假设class 名为popup-fixed-scroll，我们只需要保证这个类名只有弹窗的时候使用，且一个弹窗只有一个。这样，当我们打开两个的弹窗时 就存在了两个 class 名为popup-fixed-scroll的遮罩层元素,可以通过JS的 getElementsByClassName 返回的一个数组，新弹出的窗口为数组最后面那个，由此，我们可以通过判断 其余窗口遮罩层都设置透明，只保留最后数组元素的遮罩层样式。注意:弹窗出现与销毁时都需要判断。

	/* 
      设置遮罩层
    */
    setbgColor() {
    
    
      let bgColor1 = "rgba(0, 0, 0, 0)";
      let bgColor2 = "rgba(0, 0, 0, 0.6)";
      let scrollDom = document.getElementsByClassName("popup-fixed-scroll");
      let scrollDomLength = scrollDom.length;
      for (var i = 0; i < scrollDomLength; i++) {
    
    
        if (i < scrollDomLength - 1) {
    
    
          scrollDom[i].style.backgroundColor = bgColor1;
        } else {
    
    
          scrollDom[i].style.backgroundColor = bgColor2;
        }
      }
    },
    //使用
      mounted() {
    
    
    	this.setbgColor();
  	},
  	 beforeDestroy() {
    
    
       this.setbgColor();
  	},