vue-viewerjs

基于viewer.js的vue灯箱
1,459 46
vue viewer lightbox 灯箱
Install
npm install vue-viewerjs
Latest Version:1.2.0
Vue:2
License:MIT
Last Updated:Dec 8, 2022
Links: GitHub  ·  npm
Maintainer: faima

基于viewer.js的vue灯箱

viewer.js文档

https://github.com/fengyuanchen/viewerjs

开始

NPM

npm i vue-viewerjs --save

直接引入

<script src="vue-viewer.js"></script>

使用

<vue-viewer v-model=""></vue-viewer>

<script>
    import VueViewer from 'vue-viewerjs'
    export default {
      components: {
        VueViewer
      }
    }
</script>

文档

Attributes

参数 必填 说明 类型 可选值 默认值
images ✘ 图片数据，Object{url: '图片地址', title:' 标题 '} String, Object, Array - -
visible ✘ 是否显示，支持 .sync 修饰符 boolean false
inline ✘ 是否启用内联模式 Boolean - false
button ✘ 显示右上角的按钮 Boolean - true
navbar ✘ 导航栏的可见性 0/false：隐藏，1/true：显示，2：屏幕宽度大于768像素时显示，3：屏幕宽度大于992像素时显示，4：屏幕宽度大于1200像素时显示 Boolean, Number 见说明 1
title ✘ 标题的可见性 0/false：隐藏，1/true：显示，2：屏幕宽度大于768像素时显示，3：屏幕宽度大于992像素时显示，4：屏幕宽度大于1200像素时显示, Function: 自定义标题内容，[Number, Function]： Function(image, imageData) Boolean, Number, Function, Array 见说明 1
toolbarType ✘ 工具栏的可见性 0/false：隐藏，1/true：显示，2：屏幕宽度大于768像素时显示，3：屏幕宽度大于992像素时显示，4：屏幕宽度大于1200像素时显示 Boolean, Number 见说明 1
toolbarOptions ✘ 此参数会忽略‘toolbarType’。工具栏按钮的可见性和布局。 Object {key: Boolean | Number} ， {key: String} ， {key: Function} ， {key: { show: Boolean | Number, size: String, click: Function}。 keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal" and "flipVertical" 。 sizes: "small", "medium" (default) and "large"。 -
tooltipShow ✘ 图像比率（百分比）提示 Boolean - true
movable ✘ 是否可以移动图像 Boolean - true
zoomable ✘ 是否可以放大缩小图像 Boolean - true
rotatable ✘ 是否可以旋转图像 Boolean - true
scalable ✘ 是否可以翻转图像 Boolean - true
transition ✘ 是否启用transitiondong动画 Boolean - true
fullscreen ✘ 是否可以查看原始图片大小 Boolean - true
keyboard ✘ 是否启用键盘 Boolean - true
backdrop ✘ 是否启用遮罩 Boolean, String 'static'不可点击遮罩关闭 true
loading ✘ 加载图像时是否显示加载动画 Boolean - true
loop ✘ 是否启用循环 Boolean - true
interval ✘ 播放时间间隔 Number - 5000
minWidth ✘ 最小宽度 Number - 200
minHeight ✘ 最小高度 Number - 200
zoomRatio ✘ 鼠标缩放图像时的比率 Number - 0.1
minZoomRatio ✘ 最小缩放图像比率 Number - 0.01
maxZoomRatio ✘ 最大缩放图像比率 Number - 100
zIndex ✘ z-index值 Number - 100
zIndexInline ✘ 内联模式z-index值 Number - 100
url ✘ 占位图片 String, Function - -
container ✘ 插入位置 Element, String - body
filter ✘ 顾虑器 Function - -
toggleOnDblclick ✘ 双击功能 Boolean - true
className ✘ 灯箱根元素的自定义类名 Boolean - true
zoomOnTouch ✘ 移动端触摸 Boolean - true
zoomOnWheel ✘ 鼠标滚轮缩放 Boolean - true
slideOnTouch ✘ 移动端滑动切换上下一张图片 Boolean - true

Slot

name 说明
- 自定义，会使images失效

Events

事件名称 说明 回调参数
ready 初始化ready事件 event
show 显示事件-开始 event
shown 显示事件-结束，多次显示只触发最后一次的事件 event
hide 隐藏事件-开始 event
hidden 隐藏事件-结束，多次隐藏只触发最后一次的事件 event
view 切换事件-开始 event
viewed 切换事件-结束，多次切换只触发最后一次的事件 event
zoom 缩放事件-开始 event
zoomed 缩放事件-结束，多次缩放只触发最后一次的事件 event

Methods

方法名 说明 参数
view 切换到图像到索引的图像位置，如果未显示灯箱，将首先显示灯箱。index = 索引 index
prev 上一张，如果未显示灯箱，将首先显示灯箱。 loop = 是否循环 loop
next 下一张，如果未显示灯箱，将首先显示灯箱。 loop = 是否循环 loop
move 移动 offsetX = '在水平方向上移动尺寸（px）', offsetX = '在垂直方向移动尺寸（px）， 不填默认与offsetX相同' offsetX, offsetY
moveTo 移动到 x = '在水平方向移动到（px）', y = '在垂直方向移动到（px）， 不填默认与x相同' x, y
zoom 缩放 ratio = '缩放比例，正数放大，负数缩小'， hasTooltip = '是否显示提示' ratio, hasTooltip
zoomTo 缩放到 ratio = '缩放到大小'， hasTooltip = '是否显示提示' ratio, hasTooltip
rotate 旋转 ratio = '旋转角度，正数顺时针，负数逆时针' degree
rotateTo 旋转到 ratio = '旋转到角度' degree
scale 拉伸 scaleX = '在水平方向上拉伸比例', scaleY = '在垂直方向拉伸比例， 不填默认与scaleX相同' scaleX, scaleY
scaleX 水平方向上拉伸 scaleX = '在水平方向上拉伸比例' scaleX
scaleY 垂直方向上拉伸 scaleY = '在垂直方向上拉伸比例' scaleY
play 播放 fullscreen = '是否全屏' fullscreen
stop 停止播放 -
full 进入模态模式 -
exit 退出模态模式 -
tooltip 显示当前比例 -
toggle 切换到在自然大小 -
reset 初始化 -

Related Packages

vue-lightbox-lite

A lightweight image and video lightbox gallery component for Vue

4,093 3
lightbox viewer vue gallery vue-gallery vue-lightbox vue-viewer
@elisiondesign/vue-sole-lightbox

A minimalstic single-image lightbox made for Vue.js

238 0
lightbox vue
@tato30/vue-pdf

PDF component for Vue 3

2,130,711 692
viewer vue pdf
vue-pdf

vue.js pdf viewer

864,848 2,295
viewer pdf vue.js
@teckel/vue-pdf

vue.js pdf viewer

163,440 2
viewer pdf vue.js

Version History

Version Released Vue License
1.2.0 ^2.5.11 MIT
1.1.1 ^2.5.11 MIT
1.1.0 ^2.5.11 MIT
1.0.7 ^2.5.11 MIT
1.0.6 ^2.5.11 MIT