低代码平台 表单设计器 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 天前
前端一站式文件预览方案:open-file-viewer 完整测评与myBuilder落地实践
前端·低代码·开发平台·mybuilder
希艾席帝恩5 天前
数字孪生赋能智慧物流:物流行业转型升级新路径
大数据·人工智能·低代码·ai·数字化转型
iori97king5 天前
告别混乱 Excel:用数据表建立客户管理模型
低代码·数据建模
ebok.5 天前
AI与低代码:京微智枢平台如何重塑企业应用开发
人工智能·低代码
希艾席帝恩6 天前
生产车间智能升级背后,数字孪生发挥了什么作用
大数据·低代码·私有化部署·低代码平台·数字化转型
搭贝低代码6 天前
设备管理系统迁移改造:从手工台账到二维码数字化的实践路径
java·低代码·搭贝
搭贝低代码6 天前
财务管控系统架构设计:从Excel到数字化管控平台的技术跃迁
低代码·系统架构·excel
缓慢更新6 天前
低代码CRM系统架构设计:从数据层到表现层的完整技术方案
低代码·系统架构·rxjava
亲爱的马哥7 天前
Vue3 + Element Plus 低代码表单设计器架构拆解与私有化落地实践
低代码·架构·敏捷流程
搭贝8 天前
企业智能知识库搭建实战:搭贝低代码平台实现AI知识管理系统
人工智能·低代码