欢迎光临
我的个人博客网站

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

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » VUE 动态设置子组件弹窗的层级,解决弹窗层级失效问题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏