Vue-Photo-Preview：一款强大的Vue.js图片预览组件

<template>
  <div>
    <img
      v-for="(img, index) in imgList"
      :key="index"
      :src="img"
      @click="previewImage(index)"
    />
    <vue-photo-preview
      :preview-src-list="imgList"
      :current="currentIndex"
      @close="currentIndex = null"
    />
  </div>
</template>
 
<script>
import VuePhotoPreview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';
 
export default {
  components: {
    VuePhotoPreview
  },
  data() {
    return {
      imgList: [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        'path/to/image3.jpg'
      ],
      currentIndex: null
    };
  },
  methods: {
    previewImage(index) {
      this.currentIndex = index;
    }
  }
};
</script>

这个代码示例展示了如何在Vue应用中使用vue-photo-preview组件来实现图片列表的预览功能。它包括了图片列表的渲染和点击图片时的预览逻辑。当用户点击某个图片时，previewImage方法会被调用，并将当前图片的索引设置为currentIndex，从而触发图片预览组件的显示。当用户关闭预览时，@close事件处理器会将currentIndex重置为null，以关闭预览状态。