近期使用vant 框架，需要用到步骤条的组件，但是在官网上查找API，只提供了激活和未激活的状态，
但是有的业务场景：待审核--->审核通过---->审核未通过---->完成
如果使用多种状态，就需要使用插槽v-slot,但是官网只提供了API并未提示案例写法
先一步一步来，按照官网实现一个简化版
第一种：vant官网的例子-------只有激活和未激活的状态：
<van-steps direction="vertical">
<van-step v-for="item in list" :key="item.id">
<h3>姓名：{{item.name}}</h3>
<p>城市：{{item.city}}</p>
<p>电话{{item.telphone}}</p>
</van-step>
</van-steps>
第二种：自定义的多种状态icon和样式--------多种状态的步骤展示
<van-steps direction="vertical">
<van-step v-for="item in list" :key="item.id">
<template v-slot:inactive-icon>
<van-icon :name="item.icon" :class="item.classActive" />
</template>
<template v-slot:active-icon>
<van-icon :name="item.icon" :class="item.classActive" />
</template>
<h3 style="color:#323233;">姓名：{{item.name}}</h3>
<p style="color:#323233;">城市：{{item.city}}</p>
<p :class="item.classActive">电话{{item.telphone}}</p>
</van-step>
</van-steps>
样式
.successClass {
color: #07c160;
}
.errorClass {
color: #ee0a24;
}
.warningClass {
color: #e6a23c;
}
字体的样式，和icon的大小都是可以通过样式设置的
以上是使用vant的步骤条的总结
我在这里研究了一番，特此写出来，记录一下
如果能帮到遇到同样问题的小伙伴，就更好啦