PhotoSwipe 插件的使用

  PhotoSwipe 是一款图片预览插件，而且个人觉得自定义程度很高。这里总结下在vue中的使用。

使用

• npm install photoswipe --save

• 在页面中导入相应的 js 和 css等

    import PhotoSwipe from 'photoswipe'
    import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
    import 'photoswipe/dist/photoswipe.css'
    import 'photoswipe/dist/default-skin/default-skin.css'
  

• 相应的DOM结构

• 初始化

    let pswpElement = document.querySelectorAll('.pswp')[0]
    let items = [
      {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
      },
      {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
      }
    ]
    let options = {
      index: 1,
      history: false
    }
  
    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options)
    gallery.init()
  

自定义的使用

• 可以在类名为 pswp__top-bar 的标签下自定义一些自己的内容即可