kuan-vue-photoswipe

发布: 2018-10-24 13:50:36标签: 前端开发

kuan-vue-photoswipe

github 仓库目录下 test 文件目录下是使用 demo

vue 简单包装一下: https://github.com/dimsemenov/PhotoSwipe

预览地址: https://kuan1.github.io/kuan-vue-photoswipe/demo/

安装

01yarn add kuan-vue-photoswipe
复制代码

使用

引入

01import Vue from 'vue'
02import photoSwipe from 'kuan-vue-photoswipe'
03
04Vue.use(photoSwipe)
复制代码

单张快速预览

01/**
02 * @param {src} 图片地址
03 */
04photoSwipe.preview('https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')
05
06
07// 如果在vue组件中
08this.$preview('https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')
复制代码

多张预览、添加图片

01/**
02 * 多组图片预览
03 * @param {Array} images [{src: '', w: '', h: '', title: ''}] === 图片数组
04 * @param {Object} options {index: 0, history: false, change: function} === 预览下标、显示hashhash路由冲突)、change
05 */
06photoSwipe.preview(this.images, { index: 1, change: this.callback })
07
08/**
09 * 添加预览图片
10 * @param {Array} images [{src: '', w: '', h: '', title: ''}] === 图片数组
11 */
12photoSwipe.push(images)
复制代码