【Vue3 组件封装】vue3 轮播图组件封装

以下是一个简化的Vue 3轮播图组件的例子，包含了基本的功能和样式。

<template>
  <div class="carousel">
    <div class="carousel-inner" :style="{ 'transform': `translateX(${currentSlide}px)` }">
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        <!-- 这里放置轮播图项的内容 -->
        <img :src="item.image" alt="carousel-image">
      </div>
    </div>
    <!-- 这里放置指示点 -->
    <div class="carousel-dots">
      <span v-for="(dot, index) in items" :key="index" :class="{ 'active': index === currentSlide }" @click="goToSlide(index)"></span>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Carousel',
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentSlide: 0,
      interval: null
    };
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeUnmount() {
    this.stopAutoPlay();
  },
  methods: {
    goToSlide(index) {
      this.currentSlide = -(index * 100); // 假设每个项占100px宽
    },
    startAutoPlay() {
      if (this.interval) return;
      this.interval = setInterval(() => {
        this.goToNextSlide();
      }, 3000); // 自动播放间隔
    },
    stopAutoPlay() {
      if (this.interval) {
        clearInterval(this.interval);
        this.interval = null;
      }
    },
    goToNextSlide() {
      this.currentSlide -= 100; // 假设每个项占100px宽
      if (this.currentSlide < -(this.items.length * 100)) {
        this.currentSlide = 0;
      }
    }
  }
};
</script>
 
<style scoped>
.carousel {
  position: relative;
  overflow: hidden;
  max-width: 600px;
}
.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  width: 100%;
}
.carousel-item img {
  width: 100%;
  display: block;
}
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.carousel-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  background-color: #ccc;
}
.carousel-dots .active {
  background-color: #333;
}
</style>

这个组件提供了基本的轮播图功能，包括自动播放、点击指示点切换等。样式和动画是简化的，仅用于演示。在实际应用中，你需要根据自己的设计进行样式调整。