2021-04-13 13:21:10 +08:00
|
|
|
|
---
|
|
|
|
|
title: Steps 步骤条
|
|
|
|
|
description:
|
|
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Steps
|
|
|
|
|
icon:
|
|
|
|
|
order: 68
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
步骤条组件
|
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "steps",
|
|
|
|
|
"value": 1,
|
|
|
|
|
"steps": [
|
|
|
|
|
{
|
|
|
|
|
"title": "First",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Second"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Last"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 设置状态
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "steps",
|
|
|
|
|
"value": 1,
|
|
|
|
|
"status": "error",
|
|
|
|
|
"steps": [
|
|
|
|
|
{
|
|
|
|
|
"title": "First"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Second",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Last"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-09-03 10:05:24 +08:00
|
|
|
|
## 指定步骤条方向
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "steps",
|
|
|
|
|
"mode": 'vertical',
|
|
|
|
|
"value": 1,
|
|
|
|
|
"steps": [
|
|
|
|
|
{
|
|
|
|
|
"title": "First",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Second",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Last",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-04-13 13:21:10 +08:00
|
|
|
|
## 数据映射
|
|
|
|
|
|
2021-11-15 10:17:13 +08:00
|
|
|
|
当前处于第几步统一通过 `name` 关联变量名,其他配置可通过 `"${xxx}"` 关联上下文变量。
|
|
|
|
|
|
2021-04-13 13:21:10 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"data": {
|
|
|
|
|
"step": 1,
|
2021-04-14 11:11:04 +08:00
|
|
|
|
"status": "error",
|
|
|
|
|
"secondTitle": "Second"
|
2021-04-13 13:21:10 +08:00
|
|
|
|
},
|
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "steps",
|
2021-11-15 10:17:13 +08:00
|
|
|
|
"name": "step",
|
2021-04-13 13:21:10 +08:00
|
|
|
|
"status": "${status}",
|
|
|
|
|
"steps": [
|
|
|
|
|
{
|
|
|
|
|
"title": "First",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description"
|
|
|
|
|
},
|
|
|
|
|
{
|
2021-04-14 11:11:04 +08:00
|
|
|
|
"title": "${secondTitle}"
|
2021-04-13 13:21:10 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Last"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 接口映射
|
|
|
|
|
|
2021-11-15 10:17:13 +08:00
|
|
|
|
接口返回的数据也是一样,都会在同一个数据域,所以取值方式是一样的。
|
|
|
|
|
|
2021-04-13 13:21:10 +08:00
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"initApi": "/api/mock2/steps/get",
|
2021-04-13 13:21:10 +08:00
|
|
|
|
"body": [
|
|
|
|
|
{
|
|
|
|
|
"type": "steps",
|
2021-11-15 10:17:13 +08:00
|
|
|
|
"name": "step",
|
2021-04-13 13:21:10 +08:00
|
|
|
|
"status": "${status}",
|
|
|
|
|
"steps": [
|
|
|
|
|
{
|
|
|
|
|
"title": "First",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Secord"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Last"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Form 中静态展示
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "form",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"initApi": "/api/mock2/steps/steps",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2021-04-13 13:21:10 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "steps",
|
|
|
|
|
"source": "${steps}",
|
2021-11-15 10:17:13 +08:00
|
|
|
|
"name": "current"
|
2021-04-13 13:21:10 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 远程拉取
|
|
|
|
|
|
|
|
|
|
除了可以通过数据映射获取当前数据域中的变量以外,source 还支持配置接口,格式为 API,用于动态返回选项组。
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "form",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2021-04-13 13:21:10 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "steps",
|
|
|
|
|
"name": "steps",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"source": "/api/mock2/steps/steps"
|
2021-04-13 13:21:10 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"steps"作为选项组的 key 值,如下:
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "",
|
|
|
|
|
"data": {
|
|
|
|
|
"steps": [
|
|
|
|
|
{
|
|
|
|
|
"title": "First",
|
|
|
|
|
"subTitle": "this is sub title",
|
|
|
|
|
"value": "first"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Secord",
|
|
|
|
|
"description": "this is description",
|
|
|
|
|
"value": "secord"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Last",
|
|
|
|
|
"value": "last"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 自定义不同步骤以及状态
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "steps",
|
|
|
|
|
"value": "b",
|
|
|
|
|
"status": {
|
|
|
|
|
"a": "finish",
|
|
|
|
|
"b": "error",
|
|
|
|
|
"c": "wait"
|
|
|
|
|
},
|
|
|
|
|
"steps": [
|
|
|
|
|
{
|
|
|
|
|
"title": "First",
|
|
|
|
|
"value": "a"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Second",
|
|
|
|
|
"subTitle": "this is subTitle",
|
|
|
|
|
"description": "this is description",
|
|
|
|
|
"value": "b"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"title": "Third",
|
|
|
|
|
"value": "c"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
2021-09-03 10:05:24 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------- |
|
|
|
|
|
| type | `string` | | `"steps"` 指定为 步骤条 渲染器 |
|
|
|
|
|
| steps | Array<[step](#step)> | [] | 数组,配置步骤信息 |
|
|
|
|
|
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源,可通过数据映射获取当前数据域变量、或者配置 API 对象 |
|
2021-11-15 10:17:13 +08:00
|
|
|
|
| name | `string` | | 关联上下文变量 |
|
|
|
|
|
| value | `string` \| `number` | `-` | 设置默认值,注意不支持表达式 |
|
2021-09-03 10:05:24 +08:00
|
|
|
|
| status | [StepStatus](#StepStatus) \| {[propName: string]: stepStatus;} | `-` | 状态 |
|
|
|
|
|
| className | `string` | `-` | 自定义类名 |
|
|
|
|
|
| mode | `horizontal` \| `vertical` | `horizontal` | 指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向 |
|
2021-04-13 13:21:10 +08:00
|
|
|
|
|
|
|
|
|
### step
|
|
|
|
|
|
2021-10-26 14:41:16 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | ----------------------------------------------------- | ------ | --------------------------------------- |
|
|
|
|
|
| title | `string \| [SchemaNode](../../docs/types/schemanode)` | | 标题 |
|
|
|
|
|
| subTitle | `string \| [SchemaNode](../../docs/types/schemanode)` | | 子标题 |
|
|
|
|
|
| description | `string \| [SchemaNode](../../docs/types/schemanode)` | | 详细描述 |
|
|
|
|
|
| icon | `string` | | icon 名,支持 fontawesome v4 或使用 url |
|
|
|
|
|
| value | `string` | | value |
|
|
|
|
|
| className | `string` | | 自定义类名 |
|
2021-04-13 13:21:10 +08:00
|
|
|
|
|
|
|
|
|
### StepStatus
|
|
|
|
|
|
|
|
|
|
`wait` | `process` | `finish` | `error`
|