vue點(diǎn)擊圖片預(yù)覽放大（鼠標(biāo)滾輪）

產(chǎn)品提出新的需求，針對圖片歧蕉，既可以按鈕放大縮小灾部，也可以鼠標(biāo)滾輪進(jìn)行放大縮小，同時旋轉(zhuǎn)圖片惯退，為了配合產(chǎn)品需求赌髓，就進(jìn)行了搜索，找到了Vue圖片瀏覽組件v-viewer，支持旋轉(zhuǎn)春弥、縮放呛哟、翻轉(zhuǎn)等操作
參考鏈接：！https://mirari.cc/2017/08/27/Vue圖片瀏覽組件v-viewer匿沛，支持旋轉(zhuǎn)扫责、縮放、翻轉(zhuǎn)等操作/
具體操作步驟
1逃呼、安裝
npm install v-viewer --save
2鳖孤、在main.js中記性引用
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
// 可以用來控制按鈕的顯示與隱藏
Viewer.setDefaults({
Options: { "inline": true,
"button": true,
"navbar":true,
"title": true,
"toolbar": true,
"tooltip": true,
"movable": true,
"zoomable": true,
"rotatable": true,
"scalable": true,
"transition": true,
"fullscreen": true,
"keyboard": true,
"url": "data-source"
}
});
名稱默認(rèn)值說明
inline false 啟用 inline 模式
button true 顯示右上角關(guān)閉按鈕
navbar true 顯示縮略圖導(dǎo)航
title true 顯示當(dāng)前圖片的標(biāo)題
toolbar true 顯示工具欄
tooltip true 顯示縮放百分比
movable true 圖片是否可移動
zoomable true 圖片是否可縮放
rotatable true 圖片是否可旋轉(zhuǎn)
scalable true 圖片是否可翻轉(zhuǎn)
transition true 使用 CSS3 過度
fullscreen true 播放時是否全屏
keyboard true 是否支持鍵盤
url src 設(shè)置大圖片的 url
3、頁面使用
<viewer :images="selectInfoPics" :options="options" class="viewer" r ef="viewer">
<template scope="scope">
<div class="dis-line align-center update-img-bg margin-bottom-20" style="margin-right: 6%;" v-for="img in scope.images" :key="img.pic">
<img :src="img.pic" :alt="img.title">
</div>
</template>
</viewer>
其中selectInfoPics相當(dāng)于是圖片的數(shù)組
4抡笼、如果大圖需要展示圖片對應(yīng)的問題苏揣，如3中options的內(nèi)容應(yīng)該賦值為
options: {
title: (el) => {
return el.getAttribute('alt')
}
},

最后編輯于：2018.12.20 11:35:25

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者