安裝
yarn add v-viewer
引入
import Vue from 'vue';
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer);
使用
<div class="img-box flex">
// images接收數(shù)組
<viewer :images="imgUrl">
<img v-for="(item,index) in imgUrl" :key="index" :src="item" alt="">
</viewer>
</div>
相關(guān)配置項(xiàng)
Viewer.setDefaults({
"inline":true, // inline模式
"button":true, // 是否展示右上角按鈕
"navbar": true, // 是否展示底部縮略圖
"title": true, // 是否展示當(dāng)前圖片標(biāo)題
"toolbar": true, // 是否展示底部工具欄
"tooltip": true, // 是否顯示縮放百分比
"movable": true, // 是否可以移動(dòng)
"zoomable": true, // 是否可以縮放
"rotatable": true, // 是否可旋轉(zhuǎn)
"scalable": true, // 是否可翻轉(zhuǎn)
"transition": true, // 是否使用 CSS3 過度
"fullscreen": true, // 播放時(shí)是否全屏
"keyboard": true, // 是否支持鍵盤
"url": "data-source", // 字符串/函數(shù) src 設(shè)置大圖片的 url
ready: function (e) {
console.log(e.type,'組件以初始化');
},
show: function (e) {
console.log(e.type,'圖片顯示開始');
},
shown: function (e) {
console.log(e.type,'圖片顯示結(jié)束');
},
hide: function (e) {
console.log(e.type,'圖片隱藏完成');
},
hidden: function (e) {
console.log(e.type,'圖片隱藏結(jié)束');
},
view: function (e) {
console.log(e.type,'視圖開始');
},
viewed: function (e) {
console.log(e.type,'視圖結(jié)束');
},
zoom: function (e) {
console.log(e.type,'圖片縮放開始');
},
zoomed: function (e) {
console.log(e.type,'圖片縮放結(jié)束');
}
})
相關(guān)文檔
演示地址：https://fengyuanchen.github.io/viewerjs/
下載地址：https://github.com/fengyuanchen/viewerjs
