vue 中使用圖片檢視器外掛Viewer.js
阿新 • • 發佈:2021-08-12
一款可以進行預覽圖片的功能外掛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>