vant step步骤条自定义icon

竖向步骤条--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;

}

 

 

 

 

标签：city,vant,自定义,竖向,color,步骤,item,step
来源： https://www.cnblogs.com/daHai007/p/14218076.html