mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
58 lines
1.5 KiB
Markdown
58 lines
1.5 KiB
Markdown
## Steps 步骤条
|
||
|
||
### 基础用法
|
||
|
||
```html
|
||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||
<zan-step>买家下单</zan-step>
|
||
<zan-step>商家接单</zan-step>
|
||
<zan-step>买家提货</zan-step>
|
||
<zan-step>交易完成</zan-step>
|
||
</zan-steps>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
active: 0
|
||
};
|
||
},
|
||
|
||
methods: {
|
||
nextStep() {
|
||
if (++this.active > 3) this.active = 0;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 只显示步骤条
|
||
|
||
```html
|
||
<zan-steps :active="active">
|
||
<zan-step>买家下单</zan-step>
|
||
<zan-step>商家接单</zan-step>
|
||
<zan-step>买家提货</zan-step>
|
||
<zan-step>交易完成</zan-step>
|
||
</zan-steps>
|
||
```
|
||
|
||
|
||
### Steps API
|
||
|
||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||
|-----------|-----------|-----------|-------------|-------------|
|
||
| active | 当前激活的步骤，从0开始 | Number | '' | '' |
|
||
| icon | 当前步骤的icon | string | '' | '' |
|
||
| iconClass | 当前步骤栏为icon添加的类 | string | '' | '' |
|
||
| title | 当前步骤从标题 | string | '' | '' |
|
||
| description | 当前步骤描述 | string | '' | '' |
|
||
|
||
### Steps Slot
|
||
|
||
| 名称 | 说明 |
|
||
|-----------|-----------|
|
||
| message-extra | 状态栏添加额外的元素 |
|
||
|