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

存在问题

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


// 组件内
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();
}

你可能感兴趣的:(前端知识点总结,vue项目)