vant步骤条，van-step⾃定义图标颜⾊
van-step⾃定义图标颜⾊
做项⽬遇到了步骤条，看了后感觉没问题，简单滴很。
☝官⽅⽰例图
再来看看我的产品UI
看完感觉问题不⼤~ 不就是改改颜⾊，改改⽂字的位置么~
我着⼿去做的时候发现了问题，才发现我不太好改啊，下⾯针对我们产品我的问题，⽬前我项⽬⽤的vant版本2.11.0：
问题1
⽬前我UI上有3种状态需要⾃定义①当前激活的②未激活的③已经激活过的这三种。但是⽬前我使⽤的2.11.0版本只⽀持⾃定义两种，第三种当前版本不⽀持。
问题2
我的⽂本竟然是在进度条的下⽅，并且vant不⽀持修改问题的位置。没有修改位置的属性。 感觉好像我能⽤的了，难不成要我⼿写嘛？
问题3
由于我图标icon都是⾃定义的所以导致这个激活的进度条的这个紫⾊的颜⾊也不能⽤属性修改了。
于是经过我不断的尝试，修改改改改改，各种改，各种试，最终实现了。好像还不错的亚⼦。
<!-- vant步骤条⾃定义-->
<template>
<div>
<van-steps :active="currentSwipeItem" @click-step="onStep">
<van-step v-for="(item, idx) in 5":key="idx">
<template v-slot:active-icon>
<!--⾃定义激活时的样式-->
<div class="step-item">
<div class="steps-active-icon">
<!--如果有icon或者图⽚可以更换放在这⾥，我的⽐较简单，我直接css画个圆-->
</div>
<!--⼀定要和激活状态写在⼀起，不然⽂字就去进度条上⽅了，不要⽂字这个可以不要-->
<span :class="currentSwipeItem === idx?'title-active':''">
{{'Lv'+(idx+1)}}
</span>
</div>
<template v-slot:inactive-icon>
<!--⾃定义未激活时的样式由于版本问题，⽬前我只有slot两种，vant版本v2.12.7以上可以直接slot三种--> <div class="step-item">
icon图标库<!--未激活的样式-->
<div v-if="currentSwipeItem > idx"class="steps-inactive-icon">
<!--如果有icon或者图⽚可以更换放在这⾥，我的⽐较简单，我直接css画个圆-->
</div>
<!--激活并且完成的样式-->
<div v-else class="steps-finish-icon">
<!--如果有icon或者图⽚可以更换放在这⾥，我的⽐较简单，我直接css画个圆-->
</div>
<!--⼀定要和激活状态写在⼀起，不然⽂字就去进度条上⽅了，不要⽂字这个可以不要-->
<span :class="currentSwipeItem > idx?'title-inactive':'title-finish'">
{{'Lv'+(idx+1)}}
</span>
</div>
</template>
</van-step>
</van-steps>
</div>
</template>
<script>
export default{
data(){
return{
currentSwipeItem:0
}
},
mounted(){
},
methods:{
onStep(index){
this.currentSwipeItem = index
},
}
}
</script>
<style lang="scss" scoped>
// 注意这是scss，如果没有sass⾃⾏粘贴出来
.van-steps {
background: transparent;// 如果背景是⽩⾊就不需要了，默认是⽩⾊的
width:80%;
margin:80px auto;
overflow: visible;//如果不需要⽂字，或者不需要调整位置，可以不设置
.step-item {
position: relative;
span {
position: absolute;
top:20px;
left:-2px;
z-index:1;
font-size:10px;
color: #999999;
}
.title-active {
// ⾃定义⽂字激活
font-weight: bold;
color: #e61f20;
left:-2px;
font-size:13px;
}
.title-inactive {
/
/ ⾃定义⽂字激活并且完成
color: #e61f20;
}
.title-finish {
//⾃定义未激活
color: #999999;
}
}
.steps-active-icon {
width:14px;
height:14px;
box-sizing: border-box;
background: #e61f20;
border:3px solid #ffc4c4;
border-radius:50%;
}
.steps-inactive-icon,
.steps-finish-icon {
width:12px;
height:12px;
box-sizing: border-box;
background: #ffffff;
border-radius:50%;
}
.steps-inactive-icon {
border:3px solid #e61f20;
}
.steps-finish-icon {
border:3px solid #c8c8c8;
}
::v-deep .van-step__circle-container {
background-color: transparent;// 如果背景是⽩⾊就不需要了，默认是⽩⾊的}
::v-deep .van-step--horizontal .van-step__line {
height:4px;// ⾃定义调整进度条的粗细
top:28px;// ⾃定义调整进度条的位置
background-color: #e4e4e4;
}
::v-deep .van-step--finish .van-step__line {
background-color: #e61f20;//⾃定义激活时进度条的颜⾊
}
}
</style>
折腾了半天不容易，写个⼩⽂章记录⼀下~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。