步骤条组件是自定义页面的高级组件。

1. 使用场景

自定义页面的步骤条组件，适用于制作派遣人员信息录入，登录信息注册等，可以对基本信息的填写进度作提醒。

组件属性以及使用和示例请 点击此处 查看

步骤条演示

2. 组件基础属性

步骤组件属性设置

2.1 当前步骤属性

数字类型，控制当前步骤所在步骤数据的状态，如果步骤数据的状态都是默认，那么当前步骤就会显示进行中的状态，之前的步骤显示已完成，后面的步骤显示等待。

当前步骤属性

2.2 类型属性

步骤条的类型分为cricle圆型，arrow箭型，dot点型，如图为以下三种样式。

步骤条类型属性样式

2.3 展示方向

步骤条的展示方向可以设置水平和垂直，其中箭型不能设置垂直样式。

步骤条展示方向属性样式

2.4 内容排列属性

内容排列属性只有cricle类型支持，箭型和点型不支持这个属性，所以选择了这两种类型后不会。

步骤条内容排列属性样式

2.5 只读模式

默认关闭只读模式，允许点击步骤节点，可以执行在步骤节点设置的自定义动作。

开启只读默认，不允许点击步骤节点，不会触发自定义动作。

设置节点的自定义动作：

步骤条自定义动作

以下代码可以直接复制到JS面板

绑定变量数据源

设置按钮组件的动作

以下代码可以直接复制到 JS 面板

绑定变量数据源

3.3.1 准备操作

（1）设置容器组件的唯一标识，将需要填写的组件数据放置在容器组件中，根据容器组件的显示隐藏控制下一步需要填写的组件显隐。

设置容器组件唯一标识

（2）设置提交成功/失败的提示文本、图标和样式，这里使用变量数据源控制容器组件显隐

设置数据源控制容器显隐

​

block_3容器绑定变量数据源

（3）给按钮组件绑定动作，其中下一步，重新提交和再次提交按钮共用一个 onclick 动作。

按钮组件绑定动作

（4）步骤节点设置自定义点击动作 onclick2

步骤条绑定动作 效果演示

以下代码可以直接复制到 JS 面板，注意：需要替换组件的唯一标识