【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>

備注：個人筆記，僅供參考，不喜勿噴，謝謝。