# 设置UI引擎前端页面步骤条组件属性 步骤条是一种流程导向型导航组件，用于引导用户按顺序完成多步操作任务。适用于设备配置向导、生产流程审批、质量检测记录等需要按步骤执行的操作流程。 #### 前提条件 已在当前页面添加"步骤条"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 #### 配置入口 1. 在页面设计器的中心画布区，单击选中"步骤条"组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002503727170.png)，即可展开"属性"设置面板。 #### 基础信息 此部分配置定义步骤条组件的核心状态、数据结构与视觉呈现。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 当前步骤索引 | 标识当前正在执行或激活的步骤位置。 计数规则：从0开始计数。 范围：0到 "步骤总数-1"。 | 是 | | 步骤条数据 | 用于定义步骤条组件的所有节点数据。类型为对象数组，每个对象需配置以下属性： - name：步骤节点的名称，用于显示步骤标题。 - status：步骤节点的状态，决定节点的视觉样式和交互行为。有效取值： - doing：当前进行中。 - done：已完成。 - disabled：禁用/未开启。 - error：出错/失败。 - 空值：待执行。 - description：步骤节点的描述，用于显示步骤节点的补充信息。 示例： ``` [ {"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 ``` | 步骤节点单击事件。 - index：单击节点的数字索引。 - node：单击节点的完整数据对象。 | | onChange | ``` (...args: any) => void ``` | 组件值发生变化时触发。 仅部分组件支持此事件，具体参数由组件实现决定。适用于输入框、下拉选择器等表单组件。 | | onFocus | ``` (e: Event) => void ``` | 元素获得焦点时触发。 传递标准的浏览器"Event"或"MouseEvent"对象，适用于输入框等表单元素。 | | onMousemove | ``` (e: Event) => void ``` | 鼠标在组件区域内移动时触发。 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。 |