想把vant-step步骤条的点,换成其他的icon图标,找了半天没有找到数字,于是找到有可以自定义图标,利用v-slot支持inactive-icon和active-icon;我没有用vant自带的vant-icon,因为确实没有找到合适的数字图案,没有ui。于是自己用div写了一个,效果一样。
<van-step>
<template v-slot:inactive-icon>
<div class="iconfont">1</div>
</template>
<template v-slot:active-icon>
<div class="iconfont-active">1</div>
</template>
<strong>供应商</strong>
<div class="trace-info">名称:{{ oilInfo.providerName || '暂无供应商信息' }}</div>
</van-step>
/* css */
.iconfont
width 18px
height 18px
color #fff
border-radius 18px
text-align center
line-height 18px
background-color #969896
.iconfont-active
width 18px
height 18px
color #fff
border-radius 18px
text-align center
line-height 18px
background-color #07c160