vue3使用组件实现完成轮播图效果

在Vue3中，你可以使用组件的方式实现轮播图效果。下面是一个简单的例子：

1. 创建Carousel.vue组件

<template>
  <div class="carousel">
    <div class="carousel-inner">
      <slot></slot>
    </div>
    <div class="carousel-controls">
      <button @click="prevSlide">Prev</button>
      <button @click="nextSlide">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlide: 0,
      totalSlides: 0
    };
  },
  mounted() {
    this.totalSlides = this.$slots.default.length;
  },
  methods: {
    prevSlide() {
      this.currentSlide =
        (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
    }
  }
};
</script>

<style>
.carousel {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-out;
  transform: translateX(-${props.currentSlide * 100}%);
}

.carousel-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-controls button {
  margin-right: 10px;
}
</style>

在上面的代码中，我们定义了一个Carousel组件，它包含一个插槽（用于插入轮播图的图片）和两个按钮（用于控制轮播图的滑动）。我们使用了flex布局和transform属性来实现轮播图的滑动效果。

2. 在父组件中使用Carousel组件

<template>
  <div class="app">
    <carousel>
      <img src="./img/slide1.jpg">
      <img src="./img/slide2.jpg">
      <img src="./img/slide3.jpg">
    </carousel>
  </div>
</template>

<script>
import Carousel from './Carousel.vue';

export default {
  components: {
    Carousel
  }
};
</script>

<style>
.app {
  max-width: 800px;
  margin: 0 auto;
}
</style>

在上面的代码中，我们在父组件中使用了Carousel组件，并在插槽中插入了三张图片。这样就完成了一个简单的轮播图效果。