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'0304Vue.use(photoSwipe)
复制代码单张快速预览
01/**02 * @param {src} 图片地址03 */04photoSwipe.preview('https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')050607// 如果在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} === 预览下标、显示hash(hash路由冲突)、change05 */06photoSwipe.preview(this.images, { index: 1, change: this.callback })0708/**09 * 添加预览图片10 * @param {Array} images [{src: '', w: '', h: '', title: ''}] === 图片数组11 */12photoSwipe.push(images)
复制代码