因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换。当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不甘心,就在GitHub找找找.........还真找到一个适合vue的插件,叫 https://github.com/fengyuanchen/viewerjs 。
说实话,它的功能还是很多很强大的,大家可以自己去看。主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。
1、首先是安装
npm install v-viewer --save
2、安装完引用(还要记得引用它的css样式)
import Vue from ‘vue‘;
import Viewer from‘v-viewer‘import‘viewerjs/dist/viewer.css‘
3、vue注册调用
Vue.use(Viewer);
Viewer.setDefaults({
Options: {"inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-s