組件依賴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); } }