[tg-preview]方便調用的圖片預覽組件

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

TODO

  1. 開放一些參數配置
相關文章
相關標籤/搜索