步骤条组件是自定义页面的高级组件。
1. 使用场景
自定义页面的步骤条组件,适用于制作派遣人员信息录入,登录信息注册等,可以对基本信息的填写进度作提醒。组件属性以及使用和示例请点击此处查看

2. 组件基础属性

2.1 当前步骤属性
数字类型,控制当前步骤所在步骤数据的状态,如果步骤数据的状态都是默认,那么当前步骤就会显示进行中的状态,之前的步骤显示已完成,后面的步骤显示等待。
2.2 类型属性
步骤条的类型分为cricle圆型,arrow箭型,dot点型,如图为以下三种样式。
2.3 展示方向
步骤条的展示方向可以设置水平和垂直,其中箭型不能设置垂直样式。
2.4 内容排列属性
内容排列属性只有cricle类型支持,箭型和点型不支持这个属性,所以选择了这两种类型后不会。
2.5 只读模式
默认关闭只读模式,允许点击步骤节点,可以执行在步骤节点设置的自定义动作。 开启只读默认,不允许点击步骤节点,不会触发自定义动作。 设置节点的自定义动作:
以下代码可以直接复制到JS面板
3. 组件高级配置
3.1 数据格式
3.2 动态设置步骤数据
步骤条的步骤数据绑定变量数据源,拖动一个按钮组件,设置点击动作。当点击时更改变量数据源内的值来实现动态设置步骤数据的功能。

以下代码可以直接复制到 JS 面板
3.3 典型案例
设置变量数据源,默认值为 0。给步骤条的当前步骤属性绑定变量数据源。
3.3.1 准备操作
(1)设置容器组件的唯一标识,将需要填写的组件数据放置在容器组件中,根据容器组件的显示隐藏控制下一步需要填写的组件显隐。

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


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

(4)步骤节点设置自定义点击动作 onclick2

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