0%

vant组件ImagePreview 遇到的一个问题

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

最后更新于 2019年11月29日

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

两个页面都对应修改即可

vant组件库SwipeCell增加点击不触发功能 ios移动端浏览器不支持dblclick事件触发
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao
  1. 武汉空调维修

    发表于:
    来自 Google Chrome 63 in windows 7

    感谢分享