基于Vue3自定义实现图片翻转预览功能

<template>
  <div class="images">
    <!-- 左箭头 -->
    <img
      src="@renderer/assets/square/icon_right2.svg"
      class="bleft"
      @click="previousImage"
    />

    <!-- 图片切换过渡效果 -->
    <transition name="slide">
      <img :key="currentImage" :src="currentImage" alt="当前图片" class="centerImage" />
    </transition>

    <!-- 右箭头 -->
    <img
      src="@renderer/assets/square/icon_right2.svg"
      class="bright"
      @click="nextImage"
    />
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const images = ref([
      "@renderer/assets/image1.jpg",
      "@renderer/assets/image2.jpg",
      "@renderer/assets/image3.jpg"
    ]);

    const currentIndex = ref(0);

    const currentImage = computed(() => {
      return images.value[currentIndex.value];
    });

    function previousImage() {
      currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length;
    }

    function nextImage() {
      currentIndex.value = (currentIndex.value + 1) % images.value.length;
    }

    return {
      currentImage,
      previousImage,
      nextImage
    };
  }
}
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
</style>

centerImage {
    border-radius: 8px;
    height: inherit;
    width: 100%;
    object-fit: cover; /* 保持图片原始比例，可能会留有空白区域 */
  }