今天介紹一款用于圖片瀏覽的Vue組件，支持旋轉、縮放、翻轉等操作，它是基于viewer.js做的二次開發(fā)，我感覺用起來挺方便的，Github地址：https://github.com/mirari/v-viewer

預覽效果

一、安裝

npm install v-viewer --save

二、使用

1.指令方式使用

只需要將v-viewer指令添加到任意元素即可，該元素下的所有img元素都會被viewer自動處理。你可以像這樣傳入配置項： v-viewer="{inline: true}"如果有必要，可以先用選擇器查找到目標元素，然后可以用el.$viewer來獲取viewer實例。

<template>
  <div id="app">
    <div class="images" v-viewer="{movable: false}">
      <img v-for="src in images" :src="src" :key="src">
    </div>
    <button type="button" @click="show">Show</button>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)
  export default {
    data() {
      //用于預覽的圖片數(shù)組
      images: ['1.jpg', '2.jpg']
    },
    methods: {
      show () {
        //獲取viewer實例
        const viewer = this.$el.querySelector('.images').$viewer
        //調用show方法進行顯示預覽圖
        viewer.show()
      }
    }
  }
</script>

2.組件方式使用

<template>
  <div id="app">
    <viewer :options="options" :images="images"
            @inited="inited"
            class="viewer" ref="viewer"
    >
      <template scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
        {{scope.options}}
      </template>
    </viewer>
    <button type="button" @click="show">Show</button>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from "v-viewer/src/component.vue"
  export default {
    components: {
      Viewer
    },
    data() {
      images: ['1.jpg', '2.jpg']
    },
    methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      show () {
        //調用$viewer的show方法，默認顯示第一張圖片
        this.$viewer.show()
        //如果需要指定顯示某一張圖片使用view方法，index是指定的那張圖片所在數(shù)組的位置索引
        //this.$viewer.view(index)
      }
    }
  }
</script>

三、Options配置項說明

'inline': true, // 是否啟用inline模式

'button': true, // 是否顯示右上角關閉按鈕

'navbar': true, // 是否顯示縮略圖底部導航欄

'title': true, // 是否顯示當前圖片標題，默認顯示alt屬性內(nèi)容和尺寸

'toolbar': true, // 是否顯示工具欄

'tooltip': true, // 放大或縮小圖片時，是否顯示縮放百分比，默認true

'fullscreen': true, // 播放時是否全屏，默認true

'loading': true, // 加載圖片時是否顯示loading圖標，默認true

'loop': true, // 是否可以循環(huán)查看圖片，默認true

'movable': true, // 是否可以拖得圖片，默認true

'zoomable': true, // 是否可以縮放圖片，默認true

'rotatable': true, // 是否可以旋轉圖片，默認true

'scalable': true, // 是否可以翻轉圖片，默認true

'toggleOnDblclick': true, // 放大或縮小圖片時，是否可以雙擊還原，默認true

'transition': true, // 使用 CSS3 過度，默認true

'keyboard': true, // 是否支持鍵盤，默認true

'zoomRatio': 0.1, // 鼠標滾動時的縮放比例，默認0.1

'minZoomRatio': 0.01, // 最小縮放比例，默認0.01

'maxZoomRatio': 100, // 最大縮放比例，默認100

'url': 'data-source' // 設置大圖片的 url

四、備注

1.中文文檔
2.在線調試參數(shù)查看效果
3.代碼示例