摘要：项目创建安装删掉生成的项目里面的修改路由创建一个代码图片描述相关配置项详情见下面键盘事件仅在下可用键退出全屏关闭退出停止播放键停止播放键查看上一张图片键查看下一张图片键放大图片键缩小图片组合键缩小到初始大小组合键放大到原始大小配置参
项目创建
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之后 |
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/98142.html
摘要：项目创建安装删掉生成的项目里面的修改路由创建一个代码图片描述相关配置项详情见下面键盘事件仅在下可用键退出全屏关闭退出停止播放键停止播放键查看上一张图片键查看下一张图片键放大图片键缩小图片组合键缩小到初始大小组合键放大到原始大小配置参 项目创建 vue init webpack mytest001 安装viewerjs npm install viewerjs 删掉生成的项目里面的hel...
摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。 在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...
摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。 在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...
摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。 在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...
阅读 2203·2021-11-22 11:56
阅读 2649·2021-10-08 10:05
阅读 7781·2021-09-22 15:53
阅读 1914·2021-09-22 15:29
阅读 2236·2021-09-08 09:35
阅读 3357·2021-09-07 10:12
阅读 1381·2019-08-30 13:11
阅读 1971·2019-08-28 17:54
