（1）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、效果