步骤条有哪些（Steps 步骤条）

引入

importVuefrom'vue';import{Step,Steps}from'vant';

Vue.use(Step);
Vue.use(Steps);

代码演示

基础用法

active属性表示当前步骤的索引，从 0 起计

<van-steps:active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step></van-steps>

exportdefault{data(){return{
active:1,
};
},
};

自定义样式

可以通过active-icon和active-color属性设置激活状态下的图标和颜色

<van-steps:active="active"active-icon="success"active-color="#38f">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step></van-steps>

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方向

<van-stepsdirection="vertical":active="0">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-1212:40</p>
</van-step>
<van-step>
<h3>【城市】物流状态2</h3>
<p>2016-07-1110:00</p>
</van-step>
<van-step>
<h3>快件已发货</h3>
<p>2016-07-1009:30</p>
</van-step></van-steps>

API

Steps Props

参数说明类型默认值active当前步骤number | string0direction显示方向，可选值为
verticalstringhorizontalactive-color激活状态颜色string#07c160inactive-color v2.9.1未激活状态颜色string#969799active-icon激活状态底部图标，可选值见 Icon 组件stringcheckedinactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Step Slots

名称说明active-icon自定义激活状态图标inactive-icon自定义未激活状态图标

Steps Events

事件名说明回调参数click-step v2.5.9点击步骤的标题或图标时触发index: number