vue使用 vant 的 uploader（上传图片） 和ImagePreview（图片预览）

图片上传没什么坑，要说的是图片预览

首先说下有赞ImagePreview的使用 官方文档：youzan.github.io/vant/#/zh-C…

上个预览效果图:

如图，路由已切换：

解决方案：beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩

beforeRouteLeave 钩子：离开路由之前执行的函数

<!-- 完整代码 -->
<template>
  <div class="uploader">
        <div>
            <img   
            @click="previewImg(item,index)" 
            v-for="(item,index) in imgList" 
            :key="index" 
            :src="item" 
        >
        <van-uploader  
           multiple 
           camera 
           :after-read="onRead">
              <van-button type="default">上传图片</van-button>
        </van-uploader> 
      </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  components: {},
  data() {
    return {
      imgList:[],
      previewImgDialog:''
    };
  },
  methods: {
    onRead(file) {
       this.imgList.push(file.content);
    },
    previewImg(imgs,index) {
      this.previewImgDialog = ImagePreview({
        images:this.imgList,
        startPosition: index,
        onClose() {
        }
      });
    },
  },
  beforeRouteLeave(to,from,next){
      this.previewImgDialog&&this.previewImgDialog.close();
      next()
  },
  mounted() {}
};
</script>