更新于

vant组件ImagePreview 遇到的一个问题

发布于 / 分类: vue 项目实战 / 仅有1条评论 / 阅读量: 1769

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

两个页面都对应修改即可

仅有一条评论

    武汉空调维修
    武汉空调维修

    来自 Windows7-Chrome 的网友发布于 223 天前

    感谢分享

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买