2020-08-13 11:47:56 +08:00
|
|
|
# Steps <small>步骤</small>
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
### 尺寸及方向
|
|
|
|
|
|
|
|
|
|
可选的 `ui` 属性值：`s`/`m`/`vertical`/`label-vertical`。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/steps/default.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 步骤状态
|
|
|
|
|
|
|
|
|
|
可以通过设置 `steps` 的 `status` 属性值定义步骤状态，若步骤出错，可设置为 `error`。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/steps/status.vue" ]]
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### 属性
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
| `ui` | `string=` | - | [^ui] |
|
|
|
|
|
| `steps` | `Array` | - | [^steps] |
|
|
|
|
|
| `current` | `number` | - | 当前步骤的索引值。 |
|
|
|
|
|
|
|
|
|
|
^^^ui
|
|
|
|
|
预设样式。
|
|
|
|
|
|
|
|
|
|
+++枚举值
|
|
|
|
|
| 值 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `s` | 小尺寸样式。 |
|
|
|
|
|
| `m` | 中尺寸样式。 |
|
|
|
|
|
| `vertical` | 纵向样式。 |
|
|
|
|
|
| `label-vertical` | 文案纵向样式。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
^^^steps
|
|
|
|
|
步骤数据源。类型为 `{ label, desc, to, status }`。
|
|
|
|
|
|
|
|
|
|
+++字段详情
|
|
|
|
|
| 名称 | 类型 | | 描述 |
|
|
|
|
|
| -- | -- | -- |
|
|
|
|
|
| `label` | `string` | 步骤标题。 |
|
|
|
|
|
| `desc` | `string` | 步骤描述。 |
|
2021-10-18 16:51:48 +08:00
|
|
|
| `to` | `string | Object` | 步骤链接。类型见 [`Link`](./link#属性) 组件的同名属性。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
| `status` | `string` | 步骤状态。可选值为默认和 `error`。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
2020-12-22 16:33:30 +08:00
|
|
|
| `default` | [^slot-default] |
|
2020-08-13 11:47:56 +08:00
|
|
|
| `index` | 序号部分内容，默认显示从 `1` 开始的序号，已完成的步骤显示完成图标，出错的步骤显示出错图标。位于 `default` 内部，作用域参数同 `default`。 |
|
|
|
|
|
| `label` | 步骤标题部分内容，默认显示 `steps` 中项目的 `label` 字段。位于 `default` 内部，作用域参数同 `default`。 |
|
|
|
|
|
| `desc` | 步骤描述部分内容，默认显示 `steps` 中项目的 `desc` 字段。位于 `default` 内部，作用域参数同 `default`。 |
|
|
|
|
|
|
2020-12-22 16:33:30 +08:00
|
|
|
^^^slot-default
|
2020-08-13 11:47:56 +08:00
|
|
|
整个步骤项内容。
|
|
|
|
|
|
|
|
|
|
默认内容：序号/完成图标、步骤标题、描述等内容。
|
|
|
|
|
|
|
|
|
|
+++作用域参数
|
|
|
|
|
| 名称 | 类型 | 描述 |
|
|
|
|
|
| -- | -- | -- |
|
|
|
|
|
| `label` | `string` | 步骤标题。同 `steps` 属性中项目的 `label` 字段。 |
|
|
|
|
|
| `desc` | `string` | 步骤描述。同 `steps` 属性中项目的 `desc` 字段。 |
|
2021-10-18 16:51:48 +08:00
|
|
|
| `to` | `string | Object` | 步骤链接。同 `steps` 属性中项目的 `to` 字段。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
| `status` | `string` | 步骤状态。同 `steps` 属性中项目的 `status` 字段。 |
|
|
|
|
|
| `index` | `number` | 步骤索引值。 |
|
|
|
|
|
|
|
|
|
|
另外，`steps` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### 事件
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `click` | 任意步骤被点击后触发，回调参数为 `(index: number, event: Event)`。其中 `index` 为被点击步骤的索引值，`event` 为相应的原生事件对象。 |
|
|
|
|
|
|
|
|
|
|
### 图标
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `success` | 已成功完成的步骤。 |
|
|
|
|
|
| `error` | 出错的步骤。 |
|
