viewer vue 文档_vue中使用viewerjs
項(xiàng)目創(chuàng)建
vue init webpack mytest001
安裝viewerjs
npm install viewerjs
刪掉生成的項(xiàng)目里面的helloWord.vue 修改路由 創(chuàng)建一個(gè)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, {
// 相關(guān)配置項(xiàng),詳情見下面
});
}
}
</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 鍵: 退出全屏/關(guān)閉/退出/停止播放;
Space 鍵: 停止/播放;
←鍵: 查看上一張圖片;
→鍵: 查看下一張圖片;
↑鍵: 放大圖片;
↓鍵: 縮小圖片;
Ctrl + 0 組合鍵: 縮小到初始大小;
Ctrl + 1 組合鍵: 放大到原始大小;
配置參數(shù)
如果要更改全局默認(rèn)選項(xiàng)，可以使用view . setdefaults(選項(xiàng))
參數(shù)名稱
參數(shù)類型
默認(rèn)值
說明
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
過濾圖像以便查看(如果圖像是可見的，應(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值名稱
說明
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)榭梢娦?/p>
{key: String } 自定義按鈕的大小
{ key: Function } 自定義按鈕點(diǎn)擊的處理
{ key: { show: Boolean | Number, size: String, click: Function } 自定義按鈕的每個(gè)屬性
size的取值范圍: small medium default large
總結(jié)
以上是生活随笔為你收集整理的viewer vue 文档_vue中使用viewerjs的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： theme vscode 护眼_VS c
- 下一篇： Vue+ElementUI+Spring