设置UI引擎前端页面步骤条组件属性
步骤条是一种流程导向型导航组件，用于引导用户按顺序完成多步操作任务。适用于设备配置向导、生产流程审批、质量检测记录等需要按步骤执行的操作流程。
前提条件
已在当前页面添加“步骤条”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“步骤条”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
此部分配置定义步骤条组件的核心状态、数据结构与视觉呈现。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
当前步骤索引 |
标识当前正在执行或激活的步骤位置。 计数规则：从0开始计数。 范围：0到 “步骤总数-1”。 |
是 |
|
步骤条数据 |
用于定义步骤条组件的所有节点数据。类型为对象数组，每个对象需配置以下属性：
示例： [
{"name": "设备上电", "status": "done", "description": "设备已成功启动"},
{"name": "参数配置", "status": "doing", "description": "正在配置运行参数"},
{"name": "生产执行", "status": "", "description": "等待启动生产流程"}
] |
是 |
|
节点字段名 |
“步骤条数据”中用于显示节点名称的字段名称，默认值为“name”。可根据业务数据结构自定义（如“stepName”），需确保“步骤条数据”中包含该字段。 |
是 |
|
状态字段名 |
“步骤条数据”中用于标识节点状态的字段名称，默认值为“status”，适用于条形步骤条样式。可根据业务数据结构自定义（如“stepStatus”）。 |
是 |
|
横向单链型 |
控制步骤条的基础样式类型，默认关闭（条形步骤条）。
|
是 |
|
垂直点状型 |
控制步骤条是否为垂直点状样式，默认关闭。 开启后步骤条呈垂直点状排列，适用于详细流程步骤展示（如设备维护流程）。 注意：该属性优先级低于“横向单链型”，如果“横向单链型”开启则此属性无效。 |
是 |
|
垂直模式 |
仅在“横向单链型”样式下有效，控制步骤条的图标、名称与描述是否垂直显示，默认关闭。 开启后适用于步骤名称较长的场景（如复杂工序名称）。 |
是 |
|
宽度自适应 |
控制条形步骤条的节点是否自适应宽度，默认关闭。 开启后节点宽度随内容自动调整，适用于步骤名称长度不一致的场景（如不同设备的安装步骤）。 |
是 |
|
内容居中 |
控制条形步骤条的内容是否居中显示，默认关闭。 开启后步骤条整体居中对齐，适用于页面布局需要居中展示的场景（如生产流程总览）。 |
是 |
|
高级向导模式 |
控制步骤条是否启用高级向导样式，默认关闭。 开启后强制使用条形步骤条样式，并为每个步骤添加序号、状态图标等内容，适用于需要详细引导的工业流程（如设备安装向导、系统配置流程）。 |
是 |
|
节点宽度 |
条形步骤条模式下节点的固定宽度，可取值为数字（默认单位px）、带长度单位的数值（如100px）或百分比（如25%）。适用于需要统一节点宽度的场景（如标准化生产工序展示）。 |
是 |
|
可见节点数 |
控制步骤条在页面中显示的节点数量，超出部分可通过滚动查看。适用于流程步骤较多的场景（如长周期生产流程）。 |
是 |
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
插槽信息
步骤条组件提供以下插槽，用于自定义条形步骤条的节点内容展示。
|
插槽名称 |
说明 |
|---|---|
|
数据项插槽 |
用于自定义条形步骤条每个节点的内容展示，插槽参数为当前步骤的数据对象。可通过“data.slotScope.[stepDataProperty]”访问步骤数据的属性（如“data.slotScope.name”获取步骤名称）。 |
|
数据项底部插槽 |
用于自定义条形步骤条每个节点底部的内容展示，插槽参数为当前步骤的数据对象。可通过“data.slotScope.[stepDataProperty]”访问步骤数据的属性（如“data.slotScope.description”获取步骤描述）。 |
组件事件
|
事件名称 |
类型定义 |
说明 |
|---|---|---|
|
onClick |
(index: number, node: StepsItem) => void |
步骤节点单击事件。
|
|
onChange |
(...args: any) => void |
组件值发生变化时触发。 仅部分组件支持此事件，具体参数由组件实现决定。适用于输入框、下拉选择器等表单组件。 |
|
onFocus |
(e: Event) => void |
元素获得焦点时触发。 传递标准的浏览器“Event”或“MouseEvent”对象，适用于输入框等表单元素。 |
|
onMousemove |
(e: Event) => void |
鼠标在组件区域内移动时触发。 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。 |
