vue中使用viewerjs

rose 發(fā)布于2019-08-23 12:13 / 2057人閱讀

摘要：項(xiàng)目創(chuàng)建安裝刪掉生成的項(xiàng)目里面的修改路由創(chuàng)建一個(gè)代碼圖片描述相關(guān)配置項(xiàng)詳情見下面鍵盤事件僅在下可用鍵退出全屏關(guān)閉退出停止播放鍵停止播放鍵查看上一張圖片鍵查看下一張圖片鍵放大圖片鍵縮小圖片組合鍵縮小到初始大小組合鍵放大到原始大小配置參

項(xiàng)目創(chuàng)建

vue init webpack mytest001

安裝viewerjs

npm install viewerjs

刪掉生成的項(xiàng)目里面的helloWord.vue 修改路由創(chuàng)建一個(gè)index.vue

index.vue代碼:

鍵盤事件

僅在modal mode下可用
ESC 鍵: 退出全屏/關(guān)閉/退出/停止播放;
Space 鍵: 停止/播放;
←鍵: 查看上一張圖片;
→鍵: 查看下一張圖片;
↑鍵: 放大圖片;
↓鍵: 縮小圖片;
Ctrl + 0 組合鍵: 縮小到初始大小;
Ctrl + 1 組合鍵: 放大到原始大小;

配置參數(shù)

如果要更改全局默認(rèn)選項(xiàng)，可以使用view . setdefaults(選項(xiàng))

參數(shù)名稱	參數(shù)類型	默認(rèn)值	說(shuō)明
initialViewIndex	Number	0	定義用于查看的圖像的初始索引
inline	Boolean	false	支持 inline mode
button	Boolean	true	是否顯示查看圖片時(shí)右上角的關(guān)閉按鈕
navbar	Boolean / Number	true	是否顯示底部導(dǎo)航欄 0 或者 false :不顯示 1 或者 true :顯示 2 :當(dāng)屏幕寬度大于768px時(shí)顯示 3 :當(dāng)屏幕寬度大于992px時(shí)顯示 4 :當(dāng)屏幕寬度大于1200px時(shí)顯示
title	Boolean / Number / Function / Array	true	0 或者 false 時(shí)不顯示 1或者true或者function或者array時(shí)顯示 2 :當(dāng)屏幕寬度大于768px時(shí)顯示 3 :當(dāng)屏幕寬度大于992px時(shí)顯示 4 :當(dāng)屏幕寬度大于1200px時(shí)顯示 function 在函數(shù)體內(nèi)返回標(biāo)題 array 第一個(gè)參數(shù)表示可見性(0-4) 第二個(gè)參數(shù)就是標(biāo)題
toolbar	Boolean / Number / Object	true	標(biāo)題欄是否顯示和布局 0 或者 false 時(shí)不顯示 1或者true或者時(shí)顯示 2 :當(dāng)屏幕寬度大于768px時(shí)顯示 3 :當(dāng)屏幕寬度大于992px時(shí)顯示 4 :當(dāng)屏幕寬度大于1200px時(shí)顯示 Object : Object類型詳解
tooltip	Boolean	true	放大或縮小時(shí)顯示的百分比的文字提示 true : 顯示 false : 不顯示
movable	Boolean	true	是否可以拖動(dòng)圖片
zoomable	Boolean	true	是否可以縮放圖片
rotatable	Boolean	true	是否可以旋轉(zhuǎn)圖片
scalable	Boolean	true	是否可以縮放圖片
transition	Boolean	true	為一些特殊元素啟用CSS3轉(zhuǎn)換。
fullscreen	Boolean	true	允許全屏播放
keyboard	Boolean	true	啟用鍵盤支持
backdrop	Boolean / String	true	啟用 modal 為false的時(shí)候不支持點(diǎn)擊背景關(guān)閉
loading	Boolean	true	加載圖片的時(shí)候的loading圖標(biāo)
loop	Boolean	true	是否可以循環(huán)查看圖片
interval	Number	5000	定義圖片查看器的最小的寬度
minWidth	Number	200	定義圖片查看器的最小的高度
minHeight	Number	100	播放圖片時(shí) 距離下一張圖片的間隔時(shí)間
zoomRatio	Number	0.1	利用鼠標(biāo)滾輪縮放圖片時(shí)的比例
minZoomRatio	Number	0.01	縮小圖片的最小比例
maxZoomRatio	Number	100	放大圖片的放大比例
zIndex	Number	2015	定義查看器的CSS z-index值 modal 模式下
zIndexInline	Number	0	定義查看器的CSS z-index值 inline 模式下
url	String / Function	src	原始圖像URL 如果是一個(gè)字符串，應(yīng)該圖像元素的屬性之一如果是一個(gè)函數(shù)，應(yīng)該返回一個(gè)有效的圖像URL
container	Element / String	body	將查看器置于modal模式的容器只有在 inline為 false的時(shí)候才可以使用
filter	Function	null	過(guò)濾圖像以便查看(如果圖像是可見的，應(yīng)該返回true)
toggleOnDblclick	Boolean	true	當(dāng)你放大或者縮小圖片時(shí) 雙擊還原
ready	Function	null	當(dāng)查看圖片時(shí)被觸發(fā)的函數(shù) 只會(huì)觸發(fā)一次
show	Function	null	當(dāng)查看圖片時(shí)被觸發(fā)的函數(shù) 每次查看都會(huì)觸發(fā)
shown	Function	null	當(dāng)查看圖片時(shí)被觸發(fā)的函數(shù) 每次查看都會(huì)觸發(fā) 在show之后
hide	Function	null	當(dāng)關(guān)閉圖片查看器時(shí)被觸發(fā)的函數(shù) 每次關(guān)閉都會(huì)觸發(fā)
hidden	Function	null	當(dāng)關(guān)閉圖片查看器時(shí)被觸發(fā)的函數(shù) 每次關(guān)閉都會(huì)觸發(fā) 在hide之后
view	Function	null	當(dāng)查看圖片時(shí)被觸發(fā)的函數(shù) 每次查看都會(huì)觸發(fā) 在shown之后
viewed	Function	null	當(dāng)查看圖片時(shí)被觸發(fā)的函數(shù) 每次查看都會(huì)觸發(fā) 在view之后
zoom	Function	null	在圖片縮放時(shí)觸發(fā)
zoomed	Function	null	在圖片縮放時(shí)觸發(fā) 在 zoom之后

toolbar Object詳解

key值列表: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical"

key值名稱	說(shuō)明
zoomIn	放大圖片的按鈕
zoomOut	縮小圖片的按鈕
reset	重置圖片大小的按鈕
prev	查看上一張圖片的按鈕
next	查看上一張圖片的按鈕
play	播放圖片的按鈕
rotateLeft	向左旋轉(zhuǎn)圖片的按鈕
rotateRight	向右旋轉(zhuǎn)圖片的按鈕
flipHorizontal	圖片左右翻轉(zhuǎn)的按鈕
flipVertical	圖片上下翻轉(zhuǎn)的按鈕

{key:number|Boolean} 顯示或者隱藏對(duì)應(yīng)key的按鈕為Number的時(shí)候?yàn)榭梢娦?br>{key: String } 自定義按鈕的大小
{ key: Function } 自定義按鈕點(diǎn)擊的處理
{ key: { show: Boolean | Number, size: String, click: Function } 自定義按鈕的每個(gè)屬性

size的取值范圍: small medium default large