效果图
image.png
如图所示，vant只提供了原始的圆点样式指示器，可以自定义颜色等属性，但没办法修改形状。，引用vant样式可以看到如下less设置方法：
&__indicator {
width: @swipe-indicator-size;
height: @swipe-indicator-size;
background-color: @swipe-indicator-inactive-background-color;
border-radius: 100%;
opacity: @swipe-indicator-inactive-opacity;
transition: opacity @animation-duration-fast,
background-color @animation-duration-fast;
&:not(:last-child) {
margin-right: @swipe-indicator-size;
}
&--active {
background-color: @swipe-indicator-active-background-color;
opacity: @swipe-indicator-active-opacity;
}
}
样式中宽高都用的一个值，那就没办法通过修改样式自定义方法处理了。
有两种方法可以处理：
一：采用样式自定义直接替换less样式；但这样会统一修改，不便于个性化处理；
二：采用插槽方式自定义指示器
可以采用ul无序列表自定义指示器(指示器数据来源和轮播相同)：
<template #indicator >
<ul class="indicators indicator">
<li
v-for="(item, index) in list" :key="index"
:class="{active: checkActive(index)}"
></li>
</ul>
</template>
js部分：
data() {
return {
list: [],
}
},
methods: {
checkActive(index) {
return index === this.current;// current为监听的轮播index
},
}
less样式，借用vant样式方案：
.indicators {
position: absolute;
bottom: 5px;
left: 50%;
display: flex;
transform: translateX(-50%);
}
.indicator li {
display:inline;
width: 12px;
height: 3px;
background-color: white;
border-radius: 20%;
opacity: 0.3;
transition: opacity 0.5s,//@animation-duration-fast
background-color 0.5s;//@animation-duration-fast
&:not(:last-child) {
margin-right: 6px;
}
&.active {
background-color: white;
opacity: 1;
}
}
到此就实现了自定义插槽指示器样式
