背景:要自定义步骤条的图片,但是官网上并没有找到相关示例,官网的自定义步骤条icon使用的是属性及vant的icons,我想要的是随便写什么,那就要用官网提供的slot
解决:
1、官网(vant官网)截图
2、实现:直接上代码,注意template的使用位置,内部使用div,用了背景图,so,完全定制。
<van-steps direction="vertical" :active="active">
<!--这里使用循环-->
<van-step>
<template #inactive-icon>
<div class="flag icon"></div>
</template>
<template #active-icon>
<div class="flag icon"></div>
</template>
<template #finish-icon>
<div class="flag icon"></div>
</template>
<div class="stepItem">
<div class="fl">
<span class="time">2021-01-19 17:30</span>
<span class="tag" :class="classMap['daiqueren']">待确认</span>
</div>
<p>发起人: Judy</p>
<p>备 注: 发起流程</p>
</div>
</van-step>
</van-steps>
备注:个人笔记,仅供参考,不喜勿喷,谢谢。