elementui轮播图指示器

ElementUI 的轮播图组件并没有自带指示器，但可以通过在轮播图下方添加一个自定义指示器来实现。以下是一个示例代码：

<template>
  <div class="carousel-wrapper">
    <el-carousel :interval="4000" arrow="always" indicator-position="outside">
      <el-carousel-item v-for="(item, index) in items" :key="index">
        <img :src="item.src" alt="">
      </el-carousel-item>
    </el-carousel>
    <div class="carousel-indicators">
      <span v-for="(item, index) in items" :key="index" :class="{ active: currentIndex === index }" @click="handleIndicatorClick(index)"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { src: 'https://picsum.photos/640/480?random=1' },
        { src: 'https://picsum.photos/640/480?random=2' },
        { src: 'https://picsum.photos/640/480?random=3' },
        { src: 'https://picsum.photos/640/480?random=4' },
        { src: 'https://picsum.photos/640/480?random=5' },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    handleIndicatorClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
.carousel-wrapper {
  position: relative;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.carousel-indicators span {
  width: 10px;
  height: 10px;
  background-color: #bbb;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

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

这个示例中，我们在轮播图下方添加了一个名为 `carousel-indicators` 的容器，里面包含了与轮播图数量相同的圆点，用于表示当前轮播图的位置。在 CSS 中，我们对这些圆点进行了样式的设置，同时加上了一个 `active` 类名，用于表示当前轮播图位置的圆点。在 JavaScript 中，我们通过监听圆点的点击事件，来更新当前轮播图的位置。