ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 08:37:23 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

step component

Browse Source
This commit is contained in:
cookfront
2017-03-02 16:07:02 +08:00
parent 3fa1e1021b
commit 8eff262e48
5 changed files with 237 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
docs/examples-docs/steps.md
View File

@@ -2,3 +2,56 @@
### 基础用法
```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 | 状态栏添加额外的元素 |