安装

npm install v-viewer

引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use (Viewer, {defaultOptions: {'navbar': true,'toolbar': false,'movable': false,'title': false,'zoomable': true,'scalable': true,'transition': true}
})

使用

方法一：组件

<viewer :images="imgList" class="imgClass"><div v-for="(item,index) in imgList" :key="index"><img :src="item"/></div>
</viewer>

方法二：API

<template><div><button type="button" class="button" @click="preview">preview</button></div>
</template>
<script>export default {data() {imgList: ['https://chserver.oss-cn-hangzhou.aliyuncs.com/articles/542fb7ca81f29d177ac1c5918cd4d5ee.png','https://chserver.oss-cn-hangzhou.aliyuncs.com/photos/ca9cd2d535fb610f4ca141cb9bf95d9d.jpg']},methods: {preview () {// 使用`app.use`进行全局安装，直接调用`this.$viewerApi`this.$viewerApi({options: {initialViewIndex: 1},images: this.imgList})}}}
</script>

效果

原文地址：TT的博客《v-viewer图片预览》

《v-viewer文档地址》