import {ImagePreview} from 'vant';
export default {
    data() {
      return {
        active_:'',  //切换 tab 所对应的状态数字
        instance_before:'',
        instance_after:'',
      }
    },
    //在路由离开的时候，关闭预览的图片
    beforeRouteLeave(to,from,next){
      if(this.active_ == 0){
        this.instance_before.close();
      }else{
        this.instance_after.close();
      }
      next();
    },
    methods: {
      //查看图片
      show_before_img(){
        this.instance_before = ImagePreview({
          images: [this.warsher_brfore],
        });
      },
      show_after_img(){
        this.instance_after = ImagePreview({
          images: [this.warsher_after],
        });
      },
    }
} 

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Viewer.setDefaults({
 'inline':false,
 'button':true, //右上角按钮
 "navbar": false, //底部缩略图
 "title": false, //当前图片标题
 "toolbar": false, //底部工具栏
 "tooltip": false, //显示缩放百分比
 "movable": true, //是否可以移动
 "zoomable": true, //是否可以缩放
 "rotatable": true, //是否可旋转
 "scalable": true, //是否可翻转
 "transition": true, //使用 CSS3 过度
 "fullscreen": true, //播放时是否全屏
 "keyboard": false, //是否支持键盘
 "url": "data-source",
 ready: function (e) {
  console.log(e.type,'组件以初始化');
 },
 show: function (e) {
  console.log(e.type,'图片显示开始');
 },
 shown: function (e) {
  console.log(e.type,'图片显示结束');
 },
 hide: function (e) {
  console.log(e.type,'图片隐藏完成');
 },
 hidden: function (e) {
  console.log(e.type,'图片隐藏结束');
 },
 view: function (e) {
  console.log(e.type,'视图开始');
 },
 viewed: function (e) {
  console.log(e.type,'视图结束');
 },
 zoom: function (e) {
  console.log(e.type,'图片缩放开始');
 },
 zoomed: function (e) {
  console.log(e.type,'图片缩放结束');
 }
}); 

<template>
 <div id="index">
  <ul>
   <li v-for="(item, index) in imgArr" :key="index">
    <img :src="/UploadFiles/2021-04-02/item">

单个图片的使用方法其实跟上面的例子几乎一样： //html




<div class="img-box">
  <img :src="/UploadFiles/2021-04-02/warsher_before_img">

切记，千万不要多事在事件中调用上面 mounted 中的方法，会导致在第一次触发事件的时候，Viewer 实例才刚刚生成，但是不会被调用，然后在第二次触发事件的时候，才会生效。别问我怎么知道的。。。