vue项目中使用vant组件ImagePreview图片预览在iOS上存在的问题

存在问题

在多个组件内使用,iOS下,切换路由后,会导致ImagePreview组件无法进行图片预览,放大图片

<img v-for="(item, index) in imgList" 
    @click="imgPreview(imgList, index)"
    :key="index"
    :src="item"
    alt
/>
// 组件内
import { ImagePreview } from "vant";
methods: {
  imgPreview(imgs, index) {
    ImagePreview({
      images: imgs,
      loseable: true,
      startPosition: index,
      closeOnPopstate: true
    });
  }  
}

解决方法

在组件销毁时/路由切换时,关闭ImagePreview组件

methods: {
  imgPreview(imgs, index) {
    this.imgPre = ImagePreview({
      images: imgs,
      loseable: true,
      startPosition: index,
      closeOnPopstate: true
    });
  }  
},
beforeDestory() {
    this.imgPre.close();
},
//在路由离开的时候,关闭预览的图片
beforeRouteLeave(to, from, next) {
    this.imgPre.close();
    next();
}

版权声明:本文为tsw529原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。