vant steps流程圖的圖標使用slot自定義方式

更新時間：2023年06月08日 16:46:19 作者：debug真快樂

這篇文章主要介紹了vant steps流程圖的圖標使用slot自定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant steps流程圖的圖標使用slot自定義

vant官方文檔上沒給step的slot咋用，翻了下源碼后發(fā)現他們的測試用Demo

vue 2.6以上時

支持具名插槽寫法，此時可

<!-- <template #finish-icon> -->
<step>
?? ?<template v-slot:inactive-icon>Custim Inactive Icon</template>
?? ?A
</step>
<step>
?? ?<template v-slot:active-icon>Custim Active Icon</template>
?? ?B
</step>
<step>
?? ?<template v-slot:inactive-icon>Custim Inactive Icon</template>
?? ?C
</step>

2.6以下時

使用div 指定slot屬性的寫法

<!-- 目前流程圖只支持從上到下且只有三種狀態(tài)，可以把流程線的顏色給去了，然后反轉成功和失敗圖標
?? ?并根據狀態(tài)分別設置流程中圖標 -->
<div slot="finish-icon"><van-icon name="clock" size="20" color="#D2D2D2"/></div>
<div slot="active-icon"><van-icon name="more" size="20" color="#DF3031"/></div>
<div slot="inactive-icon" v-if="isCureent"><van-icon name="checked" size="20" color="#3677F2"/></div>
<div slot="inactive-icon" v-else><van-icon name="clear" size="20" color="#DF3031"/></div>

vant之van-steps自定義圖標

要自定義步驟條的圖片，但是官網上并沒有找到相關示例，官網的自定義步驟條icon使用的是屬性及vant的icons，我想要的是隨便寫什么，那就要用官網提供的slot

解決

1、官網(vant官網)截圖

2、實現：直接上代碼，注意template的使用位置，內部使用div，用了背景圖，so，完全定制。

<van-steps direction="vertical" :active="active">
            <!--這里使用循環(huán)-->
            <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>發(fā)起人: Judy</p>
                    <p>備  注: 發(fā)起流程</p>
                </div>
            </van-step>
        </van-steps>