vue-preview,一个vue集成PhotoSwipe图片预览插件(移动端)

使用步骤：
注意事项：img标签上的class类不能去掉，每个图片数据对象中，必须有 w 和 h 属性

1. 安装 npm i vue-preview -S

2. .在main.js文件中导入该组件，并挂载到Vue身上
   import VuePreview from ‘vue-preview’;
   Vue.use(VuePreview);
   3.在组件中使用
   在放缩略图的位置放入模板
   <vue-preview :slides=“slide1” @close=“handleClose”>

export default {
data () {
return {
slide1: [
{
src:‘https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg’,
msrc:‘https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg’,
alt: ‘picture1’,
title: ‘Image Caption 1’,
w: 600,
h: 400
},
{
src:‘https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg’,
msrc:‘https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg’,
alt: ‘picture2’,
title: ‘Image Caption 2’,
w: 1200,
h: 900
}
]
}
},
methods: {
handleClose () {
console.log(‘close event’)
}
}
}