①安装插件：yarn add v-viewer
②在要使用的页面中局部引入或者在main.js中全局引入并配置插件：
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: {
inline: true, // 是否启用inline模式
button: true, // 是否显示右上角关闭按钮
navbar: true, // 是否显示缩略图底部导航栏
title: true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
toolbar: true, // 是否显示工具栏
tooltip: true, // 放大或缩小图片时，是否显示缩放百分比，默认true
fullscreen: true, // 播放时是否全屏，默认true
loading: true, // 加载图片时是否显示loading图标，默认true
loop: true, // 是否可以循环查看图片，默认true
movable: true, // 是否可以拖动图片，默认true
zoomable: true, // 是否可以缩放图片，默认true
rotatable: true, // 是否可以旋转图片，默认true
scalable: true, // 是否可以翻转图片，默认true
toggleOnDblclick: true, // 放大或缩小图片时，是否可以双击还原，默认true
transition: true, // 使用 CSS3 过度，默认true
keyboard: true, // 是否支持键盘，默认true
zoomRatio: 0.1, // 鼠标滚动时的缩放比例，默认0.1
minZoomRatio: 0.01, // 最小缩放比例，默认0.01
maxZoomRatio: 100, // 最大缩放比例，默认100
url: 'data-source' // 设置大图片的 url
}
})
③使用指令或组件的形式进行图片展示：
<-- 使用指令 -->
<div class="m-image" v-viewer>
<img
v-for="(image, index) in images"
:key="index"
:src="image.url"
:alt="image.name"
class="u-image" />
</div>
data () {
return {
images: []
}
}
<style lang="less" scoped>
.m-image {
min-width: 1200px;
}
.u-image {
max-width: 400px;
cursor: pointer;
}
</style>
<-- 使用组件 -->
<viewer :images="images">
<img
v-for="(image, index) in images"
:key="index"
:src="image.url"
:alt="image.name"
class="u-image" />
</viewer>
data () {
return {
images: []
}
}
<style lang="less" scoped>
.u-pic {
max-width: 400px;
cursor: pointer;
}
</style>
实际需求中可能需要在和用户的交互过程中实时更新**images数组，如果使用：this.images[1] = {...} 则不会正常更新。具体原因是由于Vue**无法检测到通过索引直接设置数组项进行更新，可以通过以下两种方式进行解决：
1.使用this.$set(...)对数组进行赋值（推荐）：
this.$set(this.images, 1, {…})
2.使用this.$forceUpdate()来强制更新（不建议）
④若想更改预览组件样式，可在node_modules/viewerjs/dist/里面进行相关更改重写
viewer.css中更改相关CSS样式
viewer.js中更改相关函数
