I want to change the point of the vuant-step bar to another icon icon. After searching for a long time, I can not find the number, so I find a custom icon. V-slot supports inactive-icon and inactive-icon. I didn’t use the ant-Icon that came with Vant, because I really didn’t find the right digital pattern, and there was no UI. So I wrote a div of my own, and it looks the same.
<van-step> <template v-slot:inactive-icon> <div class="iconfont">1</div> </template> <template v-slot:active-icon> <div Class ="iconfont-active">1</div> </template> <strong> Vendor </strong> <div class="trace-info"> name: {{oilInfo. ProviderName | | 'no supplier information'}} < / div > < / van - step > / * * /. CSS iconfont width 18 px height 18 px color # FFF border-radius 18px text-align center line-height 18px background-color #969896 .iconfont-active width 18px height 18px color #fff border-radius 18px text-align center line-height 18px background-color #07c160Copy the code