vue3实现轮播图组件封装

以下是一个简化的Vue 3轮播图组件的例子。这个例子使用了Composition API，并假设autoplay功能不需要完整的实现，仅用于演示如何封装一个简单的轮播图组件。

<template>
  <div class="carousel" @mouseenter="stopAutoplay" @mouseleave="startAutoplay">
    <div class="carousel-inner" :style="{ 'transform': `translateX(${currentSlide}px)` }">
      <slot></slot>
    </div>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const currentSlide = ref(0);
    const autoplayInterval = ref(null);
    const startAutoplay = () => {
      if (autoplayInterval.value) return;
      autoplayInterval.value = setInterval(() => {
        next();
      }, 3000);
    };
    const stopAutoplay = () => {
      if (autoplayInterval.value) {
        clearInterval(autoplayInterval.value);
        autoplayInterval.value = null;
      }
    };
    const next = () => {
      currentSlide.value += 100; // 假设每次滑动100px
    };
    const prev = () => {
      currentSlide.value -= 100; // 假设每次滑动100px
    };
 
    onMounted(startAutoplay);
    onUnmounted(() => {
      stopAutoplay();
    });
 
    return { currentSlide, next, prev, startAutoplay, stopAutoplay };
  },
};
</script>
 
<style scoped>
.carousel {
  position: relative;
}
.carousel-inner {
  display: flex;
  transition: transform 0.3s ease;
}
</style>

这个组件提供了一个简单的轮播图实现，包括自动播放（autoplay）的功能。它使用了Composition API的setup函数来管理状态和逻辑，并通过ref来响应式地更新DOM。startAutoplay和stopAutoplay函数分别用于控制轮播图的自动播放和停止。这个例子假设每个轮播项的宽度是100px，并且轮播是水平方向的。