vant-step 步骤条自定义数字icon

1,962 阅读1分钟

想把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