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

置顶 theMuseCatcher

已于 2023-04-12 16:30:37 修改

阅读量1.2w

点赞数 7

分类专栏： Vue2 文章标签： viewer vue.js less

于 2021-01-15 15:35:39 首次发布

本文链接：https://blog.csdn.net/Dandrose/article/details/110084091

版权

Vue2 专栏收录该内容

38 篇文章 5 订阅

订阅专栏

参考文档：Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 | Mirari's Bloghttps://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/

①安装插件：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()来强制更新（不建议）