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

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

2.在vue中引用

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

3.vue注冊調用，再調用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},
    ]
  }
}

以上就是動力節(jié)點小編介紹的"Vue圖片預覽插件viewerjs"，希望對大家有幫助，想了解更多可查看編程入門教程。動力節(jié)點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。