一款可以進行預覽圖片的功能外掛viewer.js

先下載外掛依賴
npm install v-viewer --save

在main.js裡全域性引用
// 圖片預覽
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
  Options: { 
    "inline": true, //	啟用 inline 模式
    "button": true, // 顯示右上角關閉按鈕（jQuery 版本無效）
    "navbar": true, // 顯示縮圖導航
    "title": true, //	顯示當前圖片的標題（現實 alt 屬性及圖片尺寸）
    "toolbar": true, //	顯示工具欄
    "tooltip": true, //	顯示縮放百分比
    "movable": true, //	圖片是否可移動
    "zoomable": true, //	圖片是否可縮放
    "rotatable": true, //	圖片是否可旋轉
    "scalable": true, //	圖片是否可翻轉
    "transition": true, //	使用 CSS3 過度
    "fullscreen": false, //	播放時是否全屏
    "keyboard": true, //	是否支援鍵盤
  }
});

在需要引用的頁面寫上
<!--這裡的imageList是一個由圖片路徑組成的陣列,一般後臺獲取,也可以自己在data中定義靜態的圖片路徑資料-->
    <viewer :images="imgsList"  @inited="inited"class="viewer" ref="viewer">
        <div class="map-img">
          <div v-for="(item, index) in imgsList" class="map-list">
            <span>{{item.title}}</span>
            <img  :src="item.photo" :alt="item.title" :key="index">
          </div>
        </div>
      </viewer>
<script>
export default {
    data() {
            return {
                imgsList:[],
                total:'',
                pageSize:10,
                pageNum:1,
            }
        },
   methods:{
            inited (viewer) {
                this.$viewer = viewer
            },
            show(){
                // 點開展示第一張
                this.$viewer.index=0;
                setTimeout(() => {
                    // 展開圖片瀏覽
                    this.$viewer.show()
                }, 1);
            },
  }
}
</script>