低代码平台 表单设计器 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

相关推荐
AprChell1 天前
低代码设计器和低代码设计引擎架构综述
前端·vue.js·低代码
Kagol5 天前
NocoBase 开源项目源码深度分析
低代码
UXbot7 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
盟接之桥7 天前
电子数据交换(EDI)|制造业汽车零配件场景方案
大数据·网络·人工智能·安全·低代码·汽车·制造
UXbot7 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
UXbot8 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app
NocoBase8 天前
程序员和软件还有前途吗 —— 从 NocoBase 收入再翻倍谈起
低代码·ai·开源·无代码·管理工具·内部工具·无代码开发平台
盟接之桥8 天前
制造业汽车零配件EDI软件场景方案
网络·安全·低代码·汽车·制造
小龙报8 天前
用ChatGPT 5.5构建个人写作工作流:从大纲、初稿到风格润色的提示词链
人工智能·神经网络·低代码·自然语言处理·chatgpt·gpt-3·知识图谱
撑死胆大的9 天前
2026开发变局:国标落地后,软件开发彻底换赛道
前端·低代码·ai·大模型