Vue入门必备：轻松引入Photoswipe实现图片轮播查看

一、Photoswipe简介

二、安装Photoswipe

首先，你需要从Photoswipe的GitHub页面下载最新版本的库。你也可以通过npm来安装：

npm install photoswipe --save

然后，将下载的库文件或npm安装的库文件添加到你的Vue项目中。

三、创建Vue组件

<template>
  <div>
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
          <div class="pswp__top-bar">
            <div class="pswp__counter"></div>
            <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
            <button class="pswp__button pswp__button--share" title="Share"></button>
            <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
      <div class="gallery__item" v-for="(image, index) in images" :key="index">
        <img :src="image.thumbnail" :data-size="image.fullSize" @click="openLightbox(index)" itemprop="image" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';

export default {
  data() {
    return {
      gallery: null,
      images: [
        { thumbnail: 'path/to/thumbnail1.jpg', fullSize: '1920x1080' },
        { thumbnail: 'path/to/thumbnail2.jpg', fullSize: '1920x1080' },
        { thumbnail: 'path/to/thumbnail3.jpg', fullSize: '1920x1080' }
      ]
    };
  },
  methods: {
    openLightbox(index) {
      const items = this.images.map((image, idx) => ({
        src: image.thumbnail,
        w: parseInt(image.fullSize.split('x')[0]),
        h: parseInt(image.fullSize.split('x')[1]),
        title: `Image ${idx + 1}`
      }));

      this.gallery = new PhotoSwipe(this.$el.querySelector('.pswp'), PhotoSwipeUI_Default, {
        index: index,
        galleryUID: 'gallery',
        getThumbBoundsIndex: function(index) {
          return index;
        }
      });
      this.gallery.init();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.openLightbox(0);
    });
  }
};
</script>

<style scoped>
.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery__item {
  margin: 10px;
  cursor: pointer;
}
</style>

四、使用组件

在你的Vue页面中，引入并使用ImageGallery组件：

<template>
  <ImageGallery />
</template>

<script>
import ImageGallery from './ImageGallery.vue';

export default {
  components: {
    ImageGallery
  }
};
</script>

五、总结