使用vue2封装一个轮播图组件

**Vue2轮播图组件封装**

在实际开发中，轮播图是非常常见的UI组件之一。它可以用来展示多张图片或其他类型的内容。在本文中，我们将使用Vue2来封装一个简单的轮播图组件。

### 组件结构首先，我们需要定义组件的结构。我们将使用以下结构：

* `carousel`: 轮播图容器* `indicator`: 指示器（小圆点）
* `prevButton` 和 `nextButton`: 上一张和下一张按钮### 组件代码

html<template>
 <div class="carousel">
 <!-- 轮播图容器 -->
 <ul class="carousel-list" ref="list">
 <li v-for="(item, index) in list" :key="index" class="carousel-item">
 <img :src="item.src" alt="" />
 </li>
 </ul>

 <!-- 指示器 -->
 <div class="indicator">
 <span v-for="(item, index) in list"
 :key="index"
 class="indicator-item"
 :class="{ active: currentIndex === index }"
 ></span>
 </div>

 <!-- 上一张和下一张按钮 -->
 <button class="prev-button" @click="prev">上一张</button>
 <button class="next-button" @click="next">下一张</button>
 </div>
</template>

<script>
export default {
 name: "Carousel",
 data() {
 return {
 list: [
 { src: " },
 { src: " },
 { src: " }
 ],
 currentIndex:0 };
 },
 methods: {
 prev() {
 this.currentIndex = (this.currentIndex -1 + this.list.length) % this.list.length;
 },
 next() {
 this.currentIndex = (this.currentIndex +1) % this.list.length;
 }
 }
};
</script>

<style scoped>
.carousel-list {
 position: relative;
 width:100%;
 height:200px;
}

.carousel-item {
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 transition: transform0.5s ease-in-out;
}

.carousel-item img {
 width:100%;
 height:100%;
 object-fit: cover;
}

.indicator {
 position: absolute;
 bottom:10px;
 left:50%;
 transform: translateX(-50%);
 display: flex;
 justify-content: space-between;
 align-items: center;
 width:80%;
}

.indicator-item {
 width:8px;
 height:8px;
 border-radius:50%;
 background-color: #ccc;
 margin:05px;
}

.active {
 background-color: #333;
}
</style>

html<template>
 <div>
 <Carousel :list="list" />
 </div>
</template>

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

export default {
 name: "App",
 components: { Carousel },
 data() {
 return {
 list: [
 { src: " },
 { src: " },
 { src: " }
 ]
 };
 }
};
</script>