步骤条
介绍
明示任务流程和当前完成程度,引导用户按照步骤完成任务。
API
Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
status | 状态 | 'default' | 'hide' | 'default' |
type | 步骤条类型 | 'default' | 'arrow' | 'dot'| 'navigation' | 'default' |
direction | 步骤条方向 | 'horizontal' | 'vertical' 'horizontal' | |
labelPlacement | 标签放置方向 | 'horizontal' | 'vertical' | 'horizontal' |
steps | 步骤配置 | Steps | |
active | 当前步骤索引值 | number | 1 |
activeStatus | 当前步骤状态 | 'wait' | 'process' | 'finish' | 'error' | 'process' |
changeable | 是否可以点击切换 | boolean | false |
baseStyle | 自定义样式 , 表格整体自定义样式 | string | - |
customClass | 类名绑定 , 绑定类的名称 | string | - |
lineLess | 是否使用无连接线样式 | boolean | false |
small | 是否使用小型步骤条 | boolean | false |
uniqueKey | 唯一标识 , 组件的唯一标识 | string | - |
customRender | 自定义步骤内容 | boolean | false |
renderFunc | 自定义步骤内容渲染内容 | Function | - |
loop | 循环 , 循环渲染设置 | Loop | - |
events
事件名 | 描述 | 参数 |
---|---|---|
onChange | 值变化时 | ctx params: {step: number} loop:LoopParams |
Type
js
// 循环
type Loop = {
"data": any[],
"paramName": string,
"indexName": string,
"key": string
}
// 循环变量数据参数
type Steps = {
"id":string,
"title":string,
"status":'wait'|'process'|'finish'| 'error'|'process',
"disabled":boolean,
"description":string
}[]
// 循环变量数据参数
type LoopParams = {
"indexName":string,
"paramName":string,
"ref":ComputedRefImpl, // 全部的循环变量数据
"row":number,
"rowIndex":number
}[]