- A+
所属分类：Web前端
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, }, },
