近期使用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的步驟條的總結
我在這里研究了一番，特此寫出來，記錄一下
如果能幫到遇到同樣問題的小伙伴，就更好啦