组件依赖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

  1. 开放一些参数配置

我是好人
2.2k 声望17 粉丝

Erpack 二次封装ant-design-vue,可以看看。