Skip to content

步骤条

image

介绍

明示任务流程和当前完成程度,引导用户按照步骤完成任务。

API

Props

参数名描述类型默认值
status状态'default' | 'hide''default'
type步骤条类型'default' | 'arrow' | 'dot'| 'navigation''default'
direction步骤条方向'horizontal' | 'vertical' 'horizontal'
labelPlacement标签放置方向'horizontal' | 'vertical''horizontal'
steps步骤配置Steps
active当前步骤索引值number1
activeStatus当前步骤状态'wait' | 'process' | 'finish' | 'error''process'
changeable是否可以点击切换booleanfalse
baseStyle自定义样式 , 表格整体自定义样式string-
customClass类名绑定 , 绑定类的名称string-
lineLess是否使用无连接线样式booleanfalse
small是否使用小型步骤条booleanfalse
uniqueKey唯一标识 , 组件的唯一标识string-
customRender自定义步骤内容booleanfalse
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
}[]