vue使用 vant 的 uploader(上传图片) 和ImagePreview(图片预览)

·  阅读 6399

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

首先说下有赞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>

复制代码
分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改