VUE 動態設置子組件彈窗的層級，解決彈窗層級失效問題

 

VUE 動態設置子組件彈窗的層級，解決彈窗層級失效問題

 

 

子組件點擊更多，出彈窗，在其中存入全局的變量

   

 more() {
      // 此處是爲了動態修改點出來彈窗的z-index 設置全局的一個變量 監聽它
      this.$store.commit("getActive", 'middle');
      this.$nextTick(
        this.$refs.moreList.show("")
      )
    },

　　

 

 

父組件 template裏面用參數定義z-index

<!-- 右邊 -->
        <div
          class="left-con"
          :class="this.$store.state.showCon ? '' : 'left-hide'"
          :style="show3D ? 'z-index: 5' : `z-index:${this.zIndexLeft}`"
        >
          <!--小區概況-->
          <sketchNew />
          <!-- 人員數量 -->
          <people-data />
          <!-- 房屋數量 -->
          <house-data />
          <!-- 人員進出 -->
          <peopleIn />
        </div>

 

 

 

同時給z-index設置默認值

  data() {
    return {
      showButton: true,
      show3D: false,
      zIndexLeft: 50, // 非3D狀態下默認值 解決百度地圖和3D地圖的下彈窗對層級不一樣要求的問題
      zIndexMiddle: 45, ///非3D狀態下默認值
      zIndexRight: 40, //非3D狀態下默認值
    };

 

 

在計算屬性獲取和返回存儲的active

  

computed: {
    isActive() {
      return this.$store.state.active;
      console.log(this.$store.state.active);
    },
  },

 

 

監聽isActive，根據不一樣的類型，改變三個模塊的z-index

 

watch: {
    isActive: {
      async handler(oldV, newV) {
        console.log(oldV, newV);
        console.log("變化了");
        if (oldV === "middle") {
          this.zIndexMiddle = 100;
          this.zIndexLeft = 50;
          this.zIndexRight = 40;
          console.log("設置中間的z-index");
        } else if (oldV === "right") {
          this.zIndexRight = 100;
          this.zIndexMiddle = 45;
          this.zIndexLeft = 50;
          console.log("設置右邊的z-index");
        } else if (oldV === "left") {
          this.zIndexLeft = 100;
          this.zIndexMiddle = 45;
          this.zIndexRight = 40;
          console.log("設置左邊的z-index");
        }
      },
      immediate: true,
    },
  },