步骤条

介绍

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

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

// 循环
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
}[]