码迷,mamicode.com
首页 > 其他好文 > 详细

vant step步骤条自定义icon

时间:2021-01-04 11:29:25      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ali   color   class   item   bsp   col   vertica   nbsp   城市   

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

}

 

技术图片

 

 

 

vant step步骤条自定义icon

标签:ali   color   class   item   bsp   col   vertica   nbsp   城市   

原文地址:https://www.cnblogs.com/daHai007/p/14218076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!