viewer vue 文档_vue中使用viewerjs
項目創建
vue init webpack mytest001
安裝viewerjs
npm install viewerjs
刪掉生成的項目里面的helloWord.vue 修改路由 創建一個index.vue
index.vue代碼:
<template>
<div id="index">
<ul>
<li v-for="(item,index) of imgArr"><img :src="item" alt="圖片描述"></li>
</ul>
</div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
name: 'HelloWorld',
data() {
return {
imgArr:[
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3472263623,506218584&fm=26&gp=0.jpg',
'http://www.sinaimg.cn/dy/slidenews/21_img/2015_17/2236_4146071_705561.jpg',
'http://www.sinaimg.cn/dy/slidenews/21_img/2015_17/2236_4146072_346494.jpg'
]
}
},
mounted(){
const ViewerDom = document.getElementById('index');
const viewer = new Viewer(ViewerDom, {
// 相關配置項,詳情見下面
});
}
}
</script>
<style>
*{
padding:0;
margin: 0;
}
ul {
display: flex;
flex-wrap: wrap;
}
ul li{
width:265px;
height: 180px;
list-style: none;
border:2px solid #CCC;
border-radius: 3px;
padding: 1px;
margin: 10px;
cursor: pointer;
}
ul li img{
width:100%;
height: 100%;
}
</style>
鍵盤事件
僅在modal mode下可用
ESC 鍵: 退出全屏/關閉/退出/停止播放;
Space 鍵: 停止/播放;
←鍵: 查看上一張圖片;
→鍵: 查看下一張圖片;
↑鍵: 放大圖片;
↓鍵: 縮小圖片;
Ctrl + 0 組合鍵: 縮小到初始大小;
Ctrl + 1 組合鍵: 放大到原始大小;
配置參數
如果要更改全局默認選項，可以使用view . setdefaults(選項)
參數名稱
參數類型
默認值
說明
initialViewIndex
Number
0
定義用于查看的圖像的初始索引
inline
Boolean
false
支持 inline mode
button
Boolean
true
是否顯示查看圖片時右上角的關閉按鈕
navbar
Boolean / Number
true
是否顯示底部導航欄
0 或者 false :不顯示
1 或者 true :顯示
2:當屏幕寬度大于768px時顯示
3:當屏幕寬度大于992px時顯示
4:當屏幕寬度大于1200px時顯示
title
Boolean / Number /
Function / Array
true
0 或者 false 時不顯示
1或者true或者function或者array時顯示
2:當屏幕寬度大于768px時顯示
3:當屏幕寬度大于992px時顯示
4:當屏幕寬度大于1200px時顯示
function 在函數體內返回標題
array 第一個參數表示可見性(0-4) 第二個參數就是標題
toolbar
Boolean / Number / Object
true
標題欄是否顯示和布局
0 或者 false 時不顯示
1或者true或者時顯示
2:當屏幕寬度大于768px時顯示
3:當屏幕寬度大于992px時顯示
4:當屏幕寬度大于1200px時顯示
Object : Object類型詳解
tooltip
Boolean
true
放大或縮小時顯示的百分比的文字提示
true : 顯示
false : 不顯示
movable
Boolean
true
是否可以拖動圖片
zoomable
Boolean
true
是否可以縮放圖片
rotatable
Boolean
true
是否可以旋轉圖片
scalable
Boolean
true
是否可以縮放圖片
transition
Boolean
true
為一些特殊元素啟用CSS3轉換。
fullscreen
Boolean
true
允許全屏播放
keyboard
Boolean
true
啟用鍵盤支持
backdrop
Boolean / String
true
啟用 modal 為false的時候不支持點擊背景關閉
loading
Boolean
true
加載圖片的時候的loading圖標
loop
Boolean
true
是否可以循環查看圖片
interval
Number
5000
定義圖片查看器的最小的寬度
minWidth
Number
200
定義圖片查看器的最小的高度
minHeight
Number
100
播放圖片時 距離下一張圖片的間隔時間
zoomRatio
Number
0.1
利用鼠標滾輪縮放圖片時的比例
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
如果是一個字符串，應該圖像元素的屬性之一
如果是一個函數，應該返回一個有效的圖像URL
container
Element / String
body
將查看器置于modal模式的容器
只有在 inline為 false的時候才可以使用
filter
Function
null
過濾圖像以便查看(如果圖像是可見的，應該返回true)
toggleOnDblclick
Boolean
true
當你放大或者縮小圖片時 雙擊還原
ready
Function
null
當查看圖片時被觸發的函數 只會觸發一次
show
Function
null
當查看圖片時被觸發的函數 每次查看都會觸發
shown
Function
null
當查看圖片時被觸發的函數 每次查看都會觸發 在show之后
hide
Function
null
當關閉圖片查看器時被觸發的函數 每次關閉都會觸發
hidden
Function
null
當關閉圖片查看器時被觸發的函數 每次關閉都會觸發 在hide之后
view
Function
null
當查看圖片時被觸發的函數 每次查看都會觸發 在shown之后
viewed
Function
null
當查看圖片時被觸發的函數 每次查看都會觸發 在view之后
zoom
Function
null
在圖片縮放時觸發
zoomed
Function
null
在圖片縮放時觸發 在 zoom之后
toolbar Object詳解
key值列表: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical"
key值名稱
說明
zoomIn
放大圖片的按鈕
zoomOut
縮小圖片的按鈕
reset
重置圖片大小的按鈕
prev
查看上一張圖片的按鈕
next
查看上一張圖片的按鈕
play
播放圖片的按鈕
rotateLeft
向左旋轉圖片的按鈕
rotateRight
向右旋轉圖片的按鈕
flipHorizontal
圖片左右翻轉的按鈕
flipVertical
圖片上下翻轉的按鈕
{key:number|Boolean} 顯示或者隱藏對應key的按鈕 為Number的時候為可見性
{key: String } 自定義按鈕的大小
{ key: Function } 自定義按鈕點擊的處理
{ key: { show: Boolean | Number, size: String, click: Function } 自定義按鈕的每個屬性
size的取值范圍: small medium default large
總結
以上是生活随笔為你收集整理的viewer vue 文档_vue中使用viewerjs的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： theme vscode 护眼_VS c
- 下一篇： 关掉magiskhide_Magisk