element-plus Carousel走马灯 setActiveItem方法 （手动切换幻灯片）

因所需指示点样式和官方文档里不同，所以直接自己写了个指示点用于切换幻灯片

使用了外部指示点来切换幻灯片，并且隐藏掉了官方的指示点，官方的切换箭头

我使用的vue3 + ts + element-plus

指示点如图所示

    <div class="home-swiper__box">
      <el-carousel indicator-position="none" arrow="never" height="19rem" ref="carousel" @change="changeSwiper">
        <el-carousel-item v-for="(item, i) in swiperList" :key="i">
          <el-image :src="item.img" class="home-swiper__img" fit="cover" />
        </el-carousel-item>
      </el-carousel>
      // 指示点
      <div class="home-swiper__last">
        <div class="home-swiper__last__indicators">
          <div
            v-for="ind in swiperList.length"
            :key="ind"
            class="home-swiper__last__indicators__btn"
            :class="{
              'home-swiper__last__indicators__active': swiperIndex === ind - 1
            }"
            @click="ChangeActiveItem(ind)"
          ></div>
        </div>
      </div>
    </div>

js部分如下：具体引用不详写了

// js内容
const carousel = ref<HTMLFormElement>();
// 自动切换幻灯片时获取当前幻灯片的index
const changeSwiper = (e: number) => {
  state.swiperIndex = e;
};
// 点击切换到对应幻灯片
const ChangeActiveItem = (e: number) => {
  carousel.value?.setActiveItem(e - 1);
};

后记

菜鸡前端一枚，记录一下自己开发中遇到的不会的地方