vue图片查看控件v-viewer使用

安装依赖包
npm install v-viewer --save
组件代码imgShow.vue，实现了仅查看的功能

<template>
  <div class="display-none">
    <viewer ref="viewer" :images="images" @inited="inited">
      <img width="100%" v-for="src in images" :src="src" :key="src" alt="" fit="scale-down" />
    </viewer>
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer/src/component.vue';

export default {
     
  name: 'imgSelect',
  components: {
     
    Viewer
  },
  props: {
     
    images: {
     
      type: Array,
      default: () => []
    }
  },
  data: function() {
     
    return {
     
      dialogVisible: false
    };
  },
  created: function() {
     
    var vueObj = this;
    this.$on('show-dialog', function(dataList, afterSelect) {
     
      vueObj.$viewer.view(0);
    });
  },
  methods: {
     
    inited (viewer) {
     
      this.$viewer = viewer;
    },
    closeImgPreview() {
     
      this.dialogVisible = false;
    }
  }
};
</script>