木灵鱼儿

木灵鱼儿

阅读:2872

最后更新:2019/11/29/ 17:31:11

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 "/>

两个页面都对应修改即可

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 2872

相关文章

目录树