组件依赖PhotoSwipe。
简单封装了一下。
因为默认用法居然要给出图片的尺寸,身为一个懒人,不可能的!
默认用法
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array
var items = [
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: 0 // start at first slide
};
// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
封装完之后用法就很简单,调用组件的preview方法,传入图片列表(字符串网址组成的数组),预览图片的index,即可直接预览。
data() {
return {
items: [
"https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg",
"https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
"https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg"
]
};
},
methods: {
preview(index) {
this.$refs.preview.preview(this.items, index);
}
}
TODO
- 开放一些参数配置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。