组件依赖PhotoSwipe。数组
简单封装了一下。
由于默认用法竟然要给出图片的尺寸,身为一个懒人,不可能的!ide
默认用法ui
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,便可直接预览。this
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); } }