VUE 动态设置子组件弹窗的层级，解决弹窗层级失效问题

VUE 动态设置子组件弹窗的层级，解决弹窗层级失效问题

 

 

子组件点击更多，出弹窗，在其中存入全局的变量

   

1 2 3 4 5 6 7

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,
    },
  },