l-carousel走马灯 修改指示器样式

要修改 l-carousel（走马灯）组件的指示器样式，可以通过以下步骤实现：

1. 在 l-carousel 组件中设置 indicator-position 属性为 outside（指示器在轮播图外部）或 none（不显示指示器），以隐藏默认的指示器。

2. 在 l-carousel 组件外部添加一个自定义的指示器元素，例如一个 div 元素。

3. 使用 CSS 样式对自定义指示器元素进行样式设置，例如设置背景颜色、圆角、边框等。

4. 在 l-carousel 组件中监听 change 事件，根据当前轮播图的索引值，更新自定义指示器元素的样式，例如添加 active 类名。

以下是一个示例代码：

<template>
  <div class="carousel-wrapper">
    <l-carousel :indicator-position="indicatorPosition" @change="handleChange">
      <l-carousel-item v-for="(item, index) in items" :key="index">
        <img :src="item.src" alt="">
      </l-carousel-item>
    </l-carousel>
    <div class="custom-indicator">
      <span v-for="(item, index) in items" :key="index" :class="{ active: currentIndex === index }"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { src: 'https://picsum.photos/id/1018/800/400' },
        { src: 'https://picsum.photos/id/1015/800/400' },
        { src: 'https://picsum.photos/id/1019/800/400' },
      ],
      currentIndex: 0,
      indicatorPosition: 'none',
    };
  },
  methods: {
    handleChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style>
.carousel-wrapper {
  position: relative;
}
.custom-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.custom-indicator span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #ccc;
}
.custom-indicator span.active {
  background-color: #333;
}
</style>