vue --关于viewer插件对图片旋转、翻转、放大缩小

我的环境是vue，nodejs环境，

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

使用：
1、首先是安装（进到nodejs目录下执行）

npm install v-viewer --save

2、安装完引用（还要记得引用它的css样式）

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

3.vue注册调用，再调用setDefaults方法

Vue.use(Viewer);
Viewer.setDefaults({
    'inline':false,
    'button':false, //右上角按钮 
    "navbar": false, //底部缩略图
    "title": false, //当前图片标题
    "toolbar": true, //底部工具栏 
    "tooltip": true, //显示缩放百分比
    "movable": true, //是否可以移动
    "zoomable": true, //是否可以缩放
    "rotatable": true, //是否可旋转
    "scalable": true, //是否可翻转
    "transition": false, //使用 CSS3 过度
    "fullscreen": false, //播放时是否全屏
    "keyboard": true, //是否支持键盘
    "url": "data-source",
    ready: function (e) {
      //console.log(e.type,'组件以初始化');
    },
    show: function (e) {
      //console.log(e.type,'图片显示开始');
    },
    shown: function (e) {
      //console.log(e.type,'图片显示结束');
    },
    hide: function (e) {
      //console.log(e.type,'图片隐藏完成');
    },
    hidden: function (e) {
      //console.log(e.type,'图片隐藏结束');
    },
    view: function (e) {
      //console.log(e.type,'视图开始');
    },
    viewed: function (e) {
      //console.log(e.type,'视图结束');
      // 索引为 1 的图片旋转20度
      if(e.detail.index === 1){
          this.viewer.rotate(20);
      }
    },
    zoom: function (e) {
      //console.log(e.type,'图片缩放开始');
    },
    zoomed: function (e) {
      //console.log(e.type,'图片缩放结束');
    }
  });

这个都是放在这里

4.代码中调用使用

5.实现效果（我的上下翻页注释掉了，需要上一张下一张功能的小伙伴可以不用注释直接使用）

viewerjs插件 ，GitHub地址：https://github.com/fengyuanchen/viewerjs
补充：
如果不需要上一页下一页功能，需要注释掉本身的样式：打开viewer.css文件注释掉样式：