低代码平台 表单设计器 unione form editor 功能组件 —— 按钮组件

低代码平台表单设计器 unione-form-editor 功能组件 ------ 按钮组件

企业级表单中,所有交互的起点都是 按钮。提交、保存、重置、审核、撤回、导出、打印、弹窗、跳转、发起流程...... 没有按钮,表单就只是 "静态页面",无法形成真正的业务闭环。

按钮组件是 unione-form-editor 中最核心、最强大、最灵活的功能组件 ,它不录入数据、不展示信息,却能极度丰富表单交互能力,把表单从 "录入工具" 升级为 "可操作、可联动、可流程化" 的业务系统。

通过按钮,你可以配置对话框、抽屉、路由跳转、外部链接;可以传递表单变量、实现跨表单联动;还能控制显示隐藏、禁用启用、点击事件等逻辑。一句话:按钮,就是表单交互的大脑。


一、按钮组件核心定位:表单交互的桥梁

按钮组件是连接用户操作 → 系统响应 → 业务逻辑的桥梁。它的核心价值:

  • 让表单 "可操作",而不仅仅是填写
  • 让数据 "可传递",实现表单之间、页面之间联动
  • 让交互 "更丰富",支持弹窗、抽屉、跳转、链接四种响应方式
  • 让逻辑 "更智能",可配置显示 / 禁用规则、点击事件、权限控制

凡是需要用户 "点一下" 就能完成的动作,都由按钮组件实现。


二、按钮组件核心特性

1. 四种超强响应方式(覆盖全场景交互)

按钮支持配置响应方式,点击后自动执行:

  • 对话框:点击弹出弹窗,用于确认、提示、二次确认、查看详情
  • 抽屉:从边缘滑出抽屉面板,适合展开更多操作、编辑子表单、查看详情
  • 路由:跳转到系统内其他页面 / 菜单,实现页面间联动
  • 连接:打开外部链接、网址、文档、第三方系统

四种方式覆盖企业系统99% 的交互需求

2. 支持传递表单变量(实现真正联动)

按钮可将当前表单里的变量 / 字段值自动传递到目标:

  • 把订单号传到弹窗
  • 把客户 ID 传到抽屉
  • 把单据 ID 传到下一个页面
  • 把状态值传到外部链接

真正做到:点按钮 → 带数据 → 自动联动

3. 丰富的按钮事件与逻辑控制

  • 点击事件:执行保存、提交、审核、重置、打印、导出等
  • 标题配置:自定义按钮文字(保存 / 提交 / 取消 / 审核 / 驳回 / 打印)
  • 显示逻辑:根据表单值动态显示 / 隐藏(如已审核不显示提交按钮)
  • 禁用逻辑:根据状态、角色、进度动态禁用(如未填写不允许提交)
  • 样式类型:主按钮、次按钮、危险按钮、文字按钮、图标按钮
  • 加载状态:点击自动显示 loading,防止重复提交

4. 极高自由度,适配所有业务场景

无论简单表单还是复杂业务系统,按钮都能支撑:

  • 基础:保存、提交、重置、取消
  • 流程:提交审核、撤销、驳回、同意、确认
  • 操作:打印、导出、复制、分享、删除
  • 交互:弹窗、抽屉、跳转、打开链接
  • 系统:生成单号、发起流程、同步数据、触发校验

三、按钮组件标准配置流程

  1. 拖拽按钮组件到表单
  2. 设置按钮标题、样式、图标
  3. 配置响应方式(对话框 / 抽屉 / 路由 / 连接)
  4. 设置响应参数(传递表单变量)
  5. 配置事件与逻辑(点击事件、显示 / 禁用规则)
  6. 完成,按钮立即具备业务交互能力

四、按钮组件高频企业场景

  • 订单表单:提交、审核、驳回、打印、导出、复制
  • 员工表单:保存、启用、禁用、重置、查看档案
  • 审批表单:同意、驳回、转审、撤回、取消
  • 详情表单:弹窗查看、抽屉编辑、跳转到关联单据
  • 系统表单:导出数据、打印模板、打开帮助文档

任何需要交互的表单,按钮都是必选组件。


五、结语

按钮组件是低代码表单交互能力的天花板。它让静态表单变动态,让录入工具变业务系统,让数据联动变得简单易用。

不会写一行代码,就能实现弹窗、抽屉、页面跳转、参数传递、事件触发、逻辑控制......这就是按钮组件的强大之处。


项目已开源,欢迎 Star 收藏~

GitHubhttps://github.com/unione-cloud/unione-form-editor

Giteehttps://gitee.com/unione-cloud/unione-form-editor

相关推荐
许彰午3 小时前
44-useRowSet镜像实现
java·低代码·架构
液态不合群7 小时前
低代码不是捷径,是企业数字化转型的底层重构
低代码·重构
炎黄盈动_200313 小时前
汽车零部件企业AI智能费控方案:私有化部署、数据安全与业财一体化实践
人工智能·低代码·ai
CORNERSTONE36513 小时前
低代码开发有哪些应用场景?
低代码·excel·erp·mes·企业数字化
做萤石二次开发的哈哈14 小时前
路由器管理应用不用逐个啃协议了:海康无线路由器接入萤石蓝海AIoT,五类技能组合生成多端网管系统
人工智能·物联网·低代码·萤石开放平台·蓝海aiot一站式工作台·aiot开发
jonyleek15 小时前
企业流程提效300%:低代码重建审批中枢,3人日上线+业务人员自主迭代
低代码·私有化部署·流程引擎·bpmn·权限控制·企业级应用·jvs
SL_staff1 天前
3天上线OKR系统:一名HR与1名工程师如何用JVS完成全栈交付
java·低代码·开源
低代码布道师1 天前
外包数字化平台 第02篇|加载部门树
低代码
华无丽言3 天前
如何在宜搭中实现获取子表中的字段值赋值到父表中?
前端·javascript·低代码