Step步骤组件

2025-03-07 10:57:40首发，5小时前更新

step步骤组件可以实现历史进行的步骤条，操作进度的步骤条。

前言

步骤组件通常用来表达一段完整的进程，中间包含多个关键节点。使用场景包括：历史进程、操作进度、进行步骤等。

本框架命名为step，在其他UI框架中可能命名history，不过大同小异。

简单使用

ax-step标签即表示本框架的步骤组件，最简单的用法便是向content属性传入一个简单的数组，数组的值不重要。

节点类型

通过属性type可改变关键节点的类型，该属性可选值如下：

• dot：小圆圈，默认
• dot-fill：填充的小圆圈
• circle：大圆圈
• circle-fill：填充的大圆圈
• plain：无装饰的大号文本

真实进度

需要表达真实进度，可使用active属性，指明当前进度，0表示第一步，1表示第二步，以此类推。

Attributes属性

名称	语义类型	可选值	默认值(运行时)	说明
type	string	'dot'/'dot-fill'/'circle'/'circle-fill'/'plain'	'dot'	节点类型
theme	string	'prim'/'error'/'succ'/'info'/'warn'/'issue'/'text'	'prim'	主题风格
head-show	boolean	''	false	是否显示头部
body-show	boolean	''	false	是否显示主体文本
active	number	''	-	真实步骤
error	string	''	-	报错的步骤
pedding	boolean	''	false	当前active步骤是否表示未完成
content	any[]	''	-	具体数据
dir	string	'h'/'v'	'h'	布局方向，h指水平，v只垂直
justify	boolean	''	false	是否两头对齐（dir=h时有效）
inverted	boolean	''	false	是否翻转顺序（dir=v时有效）

Methods方法

有组件通用的内置方法：

• set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
• reset：重置组件属性，无参数
• clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

• connected：组件连接成功，无参数
• disconnected：组件断开连接，无参数
• adopted：组件被转移，无参数
• set：设置了属性，支持一个参数即设置的值
• cleared：清除了属性，无参数
• reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});