Vue图片浏览插件v-viewer的使用

yarn add v-viewer

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
// 图片加载插件
Vue.use(Viewer,{name: 'viewer'});

<template>
 <!--图片查看插件-->
 <div class="images" v-viewer="{movable: false}" style="display: none">
   <img v-for="src in images" :src="src" :key="src">
 </div>
</template>

export default {
   data() {
      return {
        images:[],
   },
   mounted: function () {
     // 图片查看插件
     show () {
       // 找到.images的div挂载到$viewer上
       const viewer = this.$el.querySelector('.images').$viewer
       viewer.show()
     }
   }
 }

viewLargerImage: function(event){
  const imgSrc = event.target.src;
  if(typeof imgSrc !=="undefined"){
    // 清空图片数组
    this.images = [];
    this.images.push(imgSrc);
    this.show();
  }
}