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

 

 

原文转载：http://www.shaoqun.com/a/668728.html

跨境电商：https://www.ikjzd.com/

blackbird：https://www.ikjzd.com/w/950

拍拍网：https://www.ikjzd.com/w/2205

VUE动态设置子组件弹窗的层级，解决弹窗层级失效问题子组件点击更多，出弹窗，在其中存入全局的变量more(){//此处是为了动态修改点出来弹窗的z-index设置全局的一个变量监听它this.$store.commit("getActive",'middle');this.$nextTick(this.$refs.moreList.show("&quo
阿里巴巴 批发：https://www.ikjzd.com/w/1084
韩蓬：https://www.ikjzd.com/w/1635
parser：https://www.ikjzd.com/w/680
事在人为！小卖家想做好Wish 这几点你得get到：https://www.ikjzd.com/home/110573
19个有用的学习网站：https://www.ikjzd.com/tl/4310
和女网友的第一次见面 口述我和女网友聊天的过程：http://lady.shaoqun.com/a/275219.html