more() {
// 此处是为了动态修改点出来弹窗的z-index 设置全局的一个变量 监听它
this.$store.commit("getActive", ‘middle‘);
this.$nextTick(
this.$refs.moreList.show("")
)
},
<!-- 右边 -->
<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>
data() { return { showButton: true, show3D: false, zIndexLeft: 50, // 非3D状态下默认值 解决百度地图和3D地图的下弹窗对层级不同要求的问题 zIndexMiddle: 45, ///非3D状态下默认值 zIndexRight: 40, //非3D状态下默认值 };
computed: { isActive() { return this.$store.state.active; console.log(this.$store.state.active); }, },
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, }, },
原文：https://www.cnblogs.com/jane-panyiyun/p/14626410.html