elementui轮播图指示器

ElementUI提供了一个Carousel（轮播图）组件，它自带指示器。你只需要在Carousel组件中设置属性indicator-position，就可以控制指示器的位置，如下所示：

<el-carousel indicator-position="outside">
  <el-carousel-item>
    <img src="img1.jpg">
  </el-carousel-item>
  <el-carousel-item>
    <img src="img2.jpg">
  </el-carousel-item>
  <el-carousel-item>
    <img src="img3.jpg">
  </el-carousel-item>
</el-carousel>

在上面的代码中，indicator-position设置为outside，表示指示器显示在轮播图的外侧。可以将其设置为inside，表示指示器显示在轮播图的内侧。

如果你想要自定义指示器的样式，可以通过设置Carousel组件的indicator-slot属性来实现。indicator-slot需要传入一个插槽，用来自定义指示器的内容和样式。例如：

<el-carousel :indicator-position="indicatorPosition" :interval="interval" indicator-slot="indicatorSlot">
  <el-carousel-item>
    <img src="img1.jpg">
  </el-carousel-item>
  <el-carousel-item>
    <img src="img2.jpg">
  </el-carousel-item>
  <el-carousel-item>
    <img src="img3.jpg">
  </el-carousel-item>
</el-carousel>

<template #indicatorSlot="{activeIndex}">
  <div class="indicator-container">
    <span v-for="(item, index) in 3" :key="index" :class="{ active: activeIndex === index }">{{ index }}</span>
  </div>
</template>

在上面的代码中，我们通过indicator-slot属性指定了一个插槽，用来自定义指示器的内容和样式。插槽中的代码会在轮播图下方渲染出一个容器，容器中的每个span元素代表一个指示点，使用active类名来标记当前激活的指示点。你可以根据自己的需求来自定义指示器的样式。