vant steps流程图的图标使用slot自定义方式
作者：debug真快乐
这篇文章主要介绍了vant steps流程图的图标使用slot自定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vant steps流程图的图标使用slot自定义
vant官方文档上没给step的slot咋用，翻了下源码后发现他们的测试用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属性的写法
<!-- 目前流程图只支持从上到下且只有三种状态，可以把流程线的颜色给去了，然后反转成功和失败图标 并根据状态分别设置流程中图标 --> <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">
<!--这里使用循环-->
<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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。