Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...

①安装插件：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中更改相关函数