写个 vue3 图片预览组件

下面是一个简单的 Vue3 图片预览组件的示例代码：

<template>
  <div>
    <img :src="currentImage" alt="Preview" />
    <button @click="prevImage">Prev</button>
    <button @click="nextImage">Next</button>
  </div>
</template>

<script>
export default {
  name: 'ImagePreview',
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      currentIndex: 0
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    }
  },
  methods: {
    prevImage() {
      this.currentIndex = (this.currentIndex + this.images.length - 1) % this.images.length
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    }
  }
}
</script>

该组件使用一个数组 `images` 来存储所有图片的 URL，并使用一个叫做 `currentIndex` 的变量来记录当前正在预览的图片的索引。它还有两个按钮，分别是 "Prev" 和 "Next"，点击这两个按钮可以切换到前一张图片或后一张图片。

使用这个组件时，可以通过将图片 URL 传递给它的 `images` 属性来设置要预览的图片。例如：

<template>
  <ImagePreview :images="['image1.jpg', 'image2.jpg', 'image3.jpg']" />
</template>

<script>
import ImagePreview from './ImagePreview.vue'

export default {
  components: {
    ImagePreview
  }
}
</script>

希望这个示例代码能够对你有所帮助。