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

简介: 这篇文章介绍了在Vue 2项目中如何通过`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
  }
})
AI 代码解读

③使用指令或组件的形式进行图片展示:

<-- 使用指令 -->
<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>
AI 代码解读
<-- 使用组件 -->
<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>
AI 代码解读

实际需求中可能需要在和用户的交互过程中实时更新**images数组,如果使用:this.images[1] = {...} 则不会正常更新。具体原因是由于Vue**无法检测到通过索引直接设置数组项进行更新,可以通过以下两种方式进行解决:

1.使用this.$set(...)对数组进行赋值(推荐):

    this.$set(this.images, 1, {…})
AI 代码解读

2.使用this.$forceUpdate()来强制更新(不建议)

④若想更改预览组件样式,可在node_modules/viewerjs/dist/里面进行相关更改重写

viewer.css中更改相关CSS样式

viewer.js中更改相关函数

目录
打赏
0
1
0
1
23
分享
相关文章
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
3月前
|
js实现的精美彩色tab选项卡切换特效源码
js实现的精美彩色tab选项卡切换特效源码是一段基于JS实现的文件夹tab选项卡切换效果,拥有彩色、单色两种选择,点击标签选项卡可实现相应的变色效果,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
46 2
vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
308 0
js轮播图实现透明度切换
涉及知识点:js、轮播图、透明度、js透明度切换轮播图。
198 0
js轮播图实现透明度切换
JS/jQuery图片预览,支持旋转-放大-放小-全屏,例子demo
JS/jQuery图片预览,支持旋转-放大-放小-全屏,例子demo
278 0

热门文章

最新文章