vue3+Ts 按项目需求自定义van-steps步骤条

在Vant中的steps所提供的样式类型相对来说过于基础，当我们需要一些别的样式时就得更具Vant所提供的API来进行自定义。

以下我会给到大家一些实用性比较高的的自定义

以下是实现上图效果的代码

<template>
  <div class="content">
    <van-nav-bar title="达标进度" left-arrow @click-left="router.back()" fixed />
    
          <!-- active-icon 这里可以用作进行中状态 -->
          <van-steps class="ml-2 mr-2" :active="active" :active-icon="successIcon(2)"  inactive-color="#e5e5e5" active-color="#eb4662">
            <van-step v-for="item in 5" :class='`step${item}`' :key="item">
              <template #inactive-icon>
                <div class="flex justify-center"><van-image width="32" fit="cover" :src="successIcon(3)" /></div>
              </template>+
              <template #finish-icon>//已完成步骤有两种状态根据接口参数设置
                <div v-if="item==1 " class="flex justify-center"><van-image width="32" fit="cover" :src="successIcon(1)" /></div>
                <div v-else class="flex justify-center"><van-image width="32" fit="cover" :src="successIcon(0)" /></div>
              </template>
              <span :class="active > item ? 'text-[#400f0d]' : ''">2024年4月</span>
            </van-step>
          </van-steps>
  </div>

</template>

<script setup>
import { ref, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/stores'
const userStore = useUserStore()
const router = useRouter()
const active = ref(3)
onActivated(() => {
})
const successIcon = (val) => {//按需传参变更图标
  let index = ''
  switch (Number(val)) {
    case 0:
      index = `/src/assets/images/state_1.png`
      break;
    case 1:
      index = `/src/assets/images/state_2.png`
      break;
    case 2:
      index = `/src/assets/images/state_3.png`
      break;
    case 3:
      index = `/src/assets/images/state_4.png`
      break;
  }
  return index
}



</script>
<style lang="less" scoped>
.content {
  background-image: url('/src/assets/images/speed_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}



/deep/.van-step__line {
  border: dashed 1px #fff;
  // width: 120px !important;

}

/deep/.van-steps--horizontal {
  padding: 10px;
  background-color: #ffffff00;
  // width: 300px; 
  // overflow: hidden;
}

/deep/.van-step__title {
  margin-top: 50px;
  margin-left: 6px;
  margin-right: 12px;
}

.step1 {
  /deep/.van-step__title {
    margin-top: 50px;
    margin-left: -10px;
  }
}

.step5 {
  /deep/.van-step__title {
    margin-top: 50px;
    margin-right: -13px;

    >span {
      word-break: break-word;
      width: 58px;
      display: inline-block;
    }
  }
}

/deep/.van-step__circle-container {
  padding: 0px 4px;
}

.van-steps {
  /deep/.van-icon__image {
    width: 2rem;
    height: 2rem;
  }
}
</style>