vue實現圖片預覽旋轉/放大縮小/上下切換等功能

插件：viewerjs

GitHub地址：https://github.com/fengyuanchen/viewerjs

使用步驟：

1.安裝。  npm install v-viewer --save 

2.引入。

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

3.注冊使用。調用 setDefaults（）方法，根據需求選擇功能。

Vue.use(Viewer);
Viewer.setDefaults({
    'inline':true,
    'button':true, //右上角按鈕
    "navbar": true, //底部縮略圖
    "title": true, //當前圖片標題
    "toolbar": true, //底部工具欄
    "tooltip": true, //顯示縮放百分比
    "movable": true, //是否可以移動
    "zoomable": true, //是否可以縮放
    "rotatable": true, //是否可旋轉
    "scalable": true, //是否可翻轉
    "transition": true, //使用 CSS3 過度
    "fullscreen": true, //播放時是否全屏
    "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.代碼中使用。

<div>
    <viewer :images="images" style="height: 800px;">
        <img v-for="item in images" :src="item.src" :key="item.index" height="100">
    </viewer>
</div>

data() {
      return {
        images:[
          {src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg',index:1},
          {src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg',index:2},
          {src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg',index:3},
          {src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3597323878,2962972725&fm=26&gp=0.jpg',index:4},
        ]
      }
    }

5.效果如下。