v-viewer点击图片预览的组件封装；

1.下载v-viewer;

npm install v-viewer -S

2.main.js中引入注册；

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

3.封装成组件；

<template>
  <div>
    <viewer :options="options"
            :images="images"
            @inited="inited"
            class="viewer" ref="viewer"
    >
      <template slot-scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src" style="display:none;">
      </template>
    </viewer>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from "v-viewer/src/component.vue"
  import { stringify } from 'querystring';
  export default {
    components: {
      Viewer
    },
    props:{
        images:{
            type:Array,
            default:[]
        }
    },
    data(){
        return{
            options:{
                "navbar": false
            }
        }
    },
    methods: {
    //这个初始化会在页面初始的时候就执行一次，后续每次传入图片也会自动执行，所有用来转发事件
      inited (viewer) {
        this.$viewer = viewer;
        this.$emit("getViewer",viewer)
      }
    }
  }
</script>

4.页面中引入组件使用；

 getViewer(viewer){
        if(this.viewer){
            this.$nextTick(() => {
                viewer.show();
            });
        }else{//先定义这个变量为空，防止第一次页面加载的时候就出现遮罩层
            this.viewer = viewer;
        }  
    },

 在其他事件中改变images数组就可以，其他的已经帮你做好了！