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:[
'ss1.bdstatic/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3472263623,506218584&fm=26&gp=0.jpg', 'www.sinaimg/dy/slidenews/21_img/2015_17/2236_4146071_705561.jpg',
'www.sinaimg/dy/slidenews/21_img/2015_17/2236_4146072_346494.jpg'
]
}
},
mounted(){
const ViewerDom = ElementById('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 Number0定义⽤于查看的图像的初始索引inline Boolean false⽀持 inline mode
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 :
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 Number5000定义图⽚查看器的最⼩的宽度
minWidth Number200定义图⽚查看器的最⼩的⾼度
minHeight Number100播放图⽚时距离下⼀张图⽚的间隔时间zoomRatio Number0.1利⽤⿏标滚轮缩放图⽚时的⽐例minZoomRatio Number0.01缩⼩图⽚的最⼩⽐例
maxZoomRatio Number100放⼤图⽚的放⼤⽐例
zIndex Number2015定义查看器的CSS z-index值 modal 模式下zIndexInline Number0定义查看器的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
发布评论