vant组件ImagePreview 遇到的一个问题

ImagePreview 是一个图箱插件,自动创建遮罩层,但是当我把它封装到一个插件里面(imgbox.vue);在两个页面都引入这个同一个组件,遮罩层会在某一个页面显示,另一个页面消失.

仔细想了下,应该是他只会创建一个遮罩层,然后创建后就不在处理了,只是显示和隐藏操作,这就导致第一个页面的遮罩层被第二个页面拿走了,没法拿出来,唯一的办法就是重载了.

通过v-if对这个imgbox进行重载渲染,创建一个判断属性,每次判断这个来是否挂载组件.

这个判断属性要在当前页面mounted生命周期时挂载一次,但是这也只能挂载一次,所以我们还要监控路由的变化,如果又到了这两个页面,就再进行一次挂载,离开时就丢掉.

data(){
 return {
  imgBoxShow: false
 }
},
 watch: {
    $route(to, form) {
      if (to.name === "xxx") {  //填页面对应的路由名
        this.imgBoxShow = true;
      } else {
        this.imgBoxShow = false;
      }
    }
  },
  mounted() {
      this.imgBoxShow = true;
  }

<imgbox v-if="imgBoxShow "/>

两个页面都对应修改即可