1.進行安裝
npm install viewerjs
2.在main.js中引入
import Vue from 'vue';
import Viewer from 'v-viewer'涕刚；
import 'viewerjs/dist/viewer.css'；
//按需引入
Vue.use(Viewer);
Viewer.setDefaults({
'inline':true,
'button':true, //右上角按鈕
"navbar": true, //底部縮略圖
"title": true, //當前圖片標題
"toolbar": true, //底部工具欄
"tooltip": true, //顯示縮放百分比
"movable": true, //是否可以移動
"zoomable": true, //是否可以縮放
"rotatable": true, //是否可旋轉(zhuǎn)
"scalable": true, //是否可翻轉(zhuǎn)
"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,'圖片顯示結(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é)束');
// 索引為 1 的圖片旋轉(zhuǎn)20度
if(e.detail.index === 1){
this.viewer.rotate(20);
}
},
zoom: function (e) {
console.log(e.type,'圖片縮放開始');
},
zoomed: function (e) {
console.log(e.type,'圖片縮放結(jié)束');
}
})
<template>
<div class="invoiceImgBox">
<viewer style="display:flex; flex-wrap: wrap;padding:20px" :images="detail.platform.platform_img_arr" class="descimgBox">
<img v-for="(decImg, index) in detail.platform.platform_img_arr" :key="index" :src="decImg" v-lazy="decImg">
</viewer>
</div>
</template>
<script>
import { InvoiceShow } from "@/api/estate";
export default {
data() {
return {
detail: null,
};
},
mounted() {
this.invoiceShow();
},
methods: {
invoiceShow() {
let data = {
invoice_log_id: this.$route.query.id,
};
InvoiceShow(data).then((res) => {
this.detail = res.data.data;
});
},
},
};
</script>
名稱 類型 默認值 說明
inline 布爾值false啟用 inline 模式
button 布爾值 true 顯示右上角關(guān)閉按鈕（jQuery 版本無效）
navbar 布爾值/整型 true 顯示縮略圖導航
title 布爾值/整型 true 顯示當前圖片的標題（現(xiàn)實 alt 屬性及圖片尺寸）
toolbar 布爾值/整型 true 顯示工具欄
tooltip 布爾值 true 顯示縮放百分比
movable 布爾值 true 圖片是否可移動
zoomable 布爾值 true 圖片是否可縮放
rotatable 布爾值 true 圖片是否可旋轉(zhuǎn)
scalable 布爾值 true 圖片是否可翻轉(zhuǎn)
transition 布爾值 true 使用 CSS3 過度
fullscreen 布爾值 true 播放時是否全屏
keyboard 布爾值 true 是否支持鍵盤
interval 整型 5000 播放間隔，單位為毫秒
zoomRatio 浮點型 0.1 鼠標滾動時的縮放比例
minZoomRatio 浮點型 0.01 最小縮放比例
maxZoomRatio 數(shù)字 100 最大縮放比例
zIndex 數(shù)字 2015 設(shè)置圖片查看器 modal 模式時的 z-index
zIndexInline 數(shù)字 0 設(shè)置圖片查看器 inline 模式時的 z-index
url 字符串/函數(shù) src 設(shè)置大圖片的 url
build 函數(shù) null 回調(diào)函數(shù)
built 函數(shù) null 回調(diào)函數(shù)
show 函數(shù) null 回調(diào)函數(shù)
shown 函數(shù) null 回調(diào)函數(shù)
hide 函數(shù) null 回調(diào)函數(shù)
hidden 函數(shù) null 回調(diào)函數(shù)
view 函數(shù) null 回調(diào)函數(shù)
viewed 函數(shù) null 回調(diào)函數(shù)
