存在问题

在多个组件内使用,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();
}
Logo

前往低代码交流专区

更多推荐