Skip to main content
步骤条组件是自定义页面的高级组件。

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)设置提交成功/失败的提示文本、图标和样式,这里使用变量数据源控制容器组件显隐
设置数据源控制容器显隐
block_3容器绑定变量数据源
(3)给按钮组件绑定动作,其中下一步,重新提交和再次提交按钮共用一个 onclick 动作。
按钮组件绑定动作
(4)步骤节点设置自定义点击动作 onclick2
步骤条绑定动作+效果演示
以下代码可以直接复制到 JS 面板,注意:需要替换组件的唯一标识