【vant】van-steps自定义图标

背景：要自定义步骤条的图片，但是官网上并没有找到相关示例，官网的自定义步骤条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>

备注：个人笔记，仅供参考，不喜勿喷，谢谢。

标签：van,vant,自定义,示例,步骤,steps,使用,官网
来源： https://www.cnblogs.com/yuanyuzhou/p/15817265.html