基于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 | 初始化 | - |