vue使用photoswiper

1. 安装

首先，需要安装photoswipe和vue-photoswipe组件。可以使用npm或yarn进行安装：

npm install photoswipe vue-photoswipe --save

2. 引入

在vue项目入口文件main.js中引入：

import Vue from 'vue'
import VuePhotoSwipe from 'vue-photoswipe'
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'

Vue.use(VuePhotoSwipe)

3. 使用

在需要显示图片的组件中使用：

<template>
  <div>
    <div v-for="(image, index) in images" :key="index" @click="openGallery(index)">
      <img :src="image.src" :alt="image.title">
    </div>
    <vue-photo-swipe :items="items" :options="options" ref="gallery"></vue-photo-swipe>
  </div>
</template>
<script>
export default {
  data () {
    return {
      images: [
        { src: '/images/1.jpg', title: 'Image 1' },
        { src: '/images/2.jpg', title: 'Image 2' },
        { src: '/images/3.jpg', title: 'Image 3' }
      ],
      items: [],
      options: {
        bgOpacity: 0.8,
        closeOnVerticalDrag: true
      }
    }
  },
  methods: {
    openGallery (index) {
      for (let i = 0; i < this.images.length; i++) {
        this.items.push({
          src: this.images[i].src,
          w: 1200,
          h: 900,
          title: this.images[i].title
        })
      }
      this.$refs.gallery.openGallery(index)
    }
  }
}
</script>

在上面的示例中，首先在模板中循环显示所有的图片，并在每个图片上绑定一个点击事件，点击事件中会调用openGallery方法打开图片浏览器。

在data函数中定义了一个images数组，其中包含了需要显示的所有图片的信息。在openGallery方法中，将images数组中的所有图片信息转换为items数组中的格式，并通过refs属性获取到vue-photo-swipe组件的实例对象，调用openGallery方法打开图片浏览器。在options属性中定义了图片浏览器的一些配置参数。

注意：需要保证图片的w和h属性值是正确的，否则会显示异常。