vue中使用viewerjs

sarva 发布于2019-07-01 10:47 / 1206人阅读

摘要：项目创建安装删掉生成的项目里面的修改路由创建一个代码图片描述相关配置项详情见下面键盘事件仅在下可用键退出全屏关闭退出停止播放键停止播放键查看上一张图片键查看下一张图片键放大图片键缩小图片组合键缩小到初始大小组合键放大到原始大小配置参

项目创建

vue init webpack mytest001

安装viewerjs

npm install viewerjs

删掉生成的项目里面的helloWord.vue 修改路由创建一个index.vue

index.vue代码:

键盘事件

仅在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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29485.html

vue中使用viewerjs

摘要：项目创建安装删掉生成的项目里面的修改路由创建一个代码图片描述相关配置项详情见下面键盘事件仅在下可用键退出全屏关闭退出停止播放键停止播放键查看上一张图片键查看下一张图片键放大图片键缩小图片组合键缩小到初始大小组合键放大到原始大小配置参项目创建 vue init webpack mytest001 安装viewerjs npm install viewerjs 删掉生成的项目里面的hel...

rose 2019-08-23 12:13 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

AlphaWallet 2019-08-02 15:56 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

lushan 2019-08-30 13:09 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

shuibo 2019-08-22 10:44 评论0 收藏0