（1）vue点击图片预览（可旋转、翻转、缩放、上下切换、键盘操作）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

今天做项目的时候，遇到了新需求，需要把点击图片放大的功能。学习了一下GitHub上的viewerjs插件 GitHub地址：https://github.com/fengyuanchen/viewerjs 

1、安装

npm install v-viewer --save-dev

2、在main.js中引入

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

3、注册调用

Vue.use(Viewer, {
  defaultOptions: {
      zIndex: 9999,
      title:false,//	显示当前图片的标题
      scalable:false,//图片是否可翻转
      rotatable:false,//图片是否可旋转
      tooltip:false,//显示缩放百分比
      navbar:false,//显示缩略图导航
      loop:false,
      loading:false
  }
})

　　还有很多的功能，可以在GitHub上查看

4、代码中使用

  <viewer :images="handImg">
       <img v-for="src in handImg" :src="src" :key="src" width="50" height="50px">
  </viewer>

let handImg = [
    'https://172.0.0.1/0.jpg',
    'https://172.0.0.1/2.jpg'
]

　5、效果

以上是 （1）vue点击图片预览（可旋转、翻转、缩放、上下切换、键盘操作） 的全部内容， 来源链接： utcz.com/z/377125.html

回到顶部