May 07, 2021 Vant
import Vue from 'vue';
import { Step, Steps } from 'vant';
Vue.use(Step);
Vue.use(Steps);
The active property represents the index of the current step, starting at 0
<van-steps :active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
export default {
data() {
return {
active: 1
};
}
}
Icons and colors in the active state can be set by the active-icon and active-color properties
<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>
You can change the display direction of the step bar by setting the direction property
<van-steps direction="vertical" :active="0">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>【城市】物流状态2</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
Parameters | Description | Type | The default |
---|---|---|---|
active | The current step | number | string |
0
|
direction |
The orientation is displayed, with an optional
vertical
|
string |
horizontal
|
active-color | Activate the status color | string |
#07c160
|
active-icon | The icon at the bottom of the activation status can be found in the Icon component | string |
checked
|
inactive-icon | The bottom icon of the status is not activated, and the optional value is found in the Icon component | string | - |
Name | Description |
---|---|
active-icon | Customize the activation status icon |
inactive-icon | Customize the inactive status icon |