vant步骤条，van-step自定义图标颜色

van-step自定义图标颜色

做项目遇到了步骤条，看了vant官网案例后感觉没问题，简单滴很。

☝官方示例图
👇再来看看我的产品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>
        <template v-slot:inactive-icon>
          <!-- 自定义未激活时的样式 由于版本问题，目前我只有slot两种，vant版本v2.12.7以上可以直接slot三种-->
          <div class="step-item">
            <!-- 未激活的样式 -->
            <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>

折腾了半天不容易，写个小文章记录一下~