vue3 element-plus el-carousel自定义指示器的样式，指示器的默认样式是长条形的，我们需要设置为圆点，这里我们通过设置指示器的class el-carousel__indicator--horizontal来设置指示器的样式。

element-plus版本

"element-plus": "^2.3.8",

实例代码

<template>
  <div class="cardBodyMain">
    <div class="cardBody" ref="cardBodyRef">
      <el-carousel ref="carousel" class="cardBodyInner" :autoplay="false" :interval="4000"
                   :height="cardBodyHeight + 'px'">
        <el-carousel-item v-for="item in list" :key="item">
          <div class="cardInfo" :style="{ backgroundImage: 'url(' + item.img + ')' }">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import img from './assets/img.jpg'

export default {
  name: "title",
  data() {
    return {
      list: [{
        img: img,
      }, {
        img: img,
      }, {
        img: img,
      }, {
        img: img,
      }, {
        img: img,
      }, {
        img: img,
      },],
      cardBodyHeight: 0 // Default height
    }
  },
  components: {},
  mounted() {
    this.cardBodyHeight = this.$refs.cardBodyRef.clientHeight - 10;
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.cardBodyMain {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
}

:deep(.cardBody) {
  .el-carousel__indicators--horizontal {
    bottom: 0px;
  }

  .el-carousel__indicator--horizontal {
    button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.2;
    }
  }
  .el-carousel__indicator--horizontal.is-active {
    button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.5;
    }
  }
}

.cardBody {
  width: calc(100% - 40px);
  margin-left: 20px;
  position: relative;
  height: calc(82% - 40px);
  padding-right: 20px;
  padding-left: 20px;
  margin-top: 40px;

  .cardInfo {
    position: relative;
    //width: 100%;
    height: calc(100% - 40px);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
}
</style>