共计 3337 个字符，预计需要花费 9 分钟才能阅读完成。
项目创建
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
