安装依赖包
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';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>