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

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

常规按钮固定排布在表单顶部或底部,受布局约束,高频操作时需要来回滑动页面寻找,操作效率受限悬浮按钮组件继承标准 按钮全部交互能力,额外搭载悬浮拖拽特色,是优化表单快捷操作的专属功能组件,归属于交互增强类功能组件。除常规按钮的点击事件、弹窗 / 抽屉 / 路由 / 外链四种触发方式、参数传递、显隐禁用逻辑配置外,独有悬浮定位、自由拖拽特性,适配各类表单快捷操作场景。

一、组件核心定位

悬浮按钮 = 全能交互按钮 + 页面悬浮容器,既拥有普通按钮全量业务能力,又突破表单布局限制,常驻页面表层,设计阶段拖拽定初始点位,表单实际运行后,操作人员可随手拖动更改摆放位置,随时随地快速触发功能。

二、核心功能特性

  1. 完整复用按钮能力 支持自定义按钮文案、图标、危险 / 主要 / 次要样式;点击响应包含弹窗对话框、侧边抽屉、页面路由跳转、外部链接;可绑定表单字段,传递表单变量实现跨页面、跨弹窗数据联动;灵活配置显示规则、禁用条件、点击回调事件,审核、导出、打印、新增等业务动作全都能实现。
  2. 双阶段自由拖拽定位 设计态:画布内直接拖拽悬浮按钮,自定义初始停靠方位(右下角、左下角、侧边居中),一键锁定初始坐标; 运行态:终端打开表单,鼠标 / 触屏长按按钮即可随意拖拽,放置在页面任意位置,位置记忆留存,下次打开表单沿用上次摆放点位。
  3. 多形态悬浮布局 支持单个悬浮按钮、悬浮折叠菜单(点击展开多个子功能按钮),可设置吸附屏幕边缘,拖拽松开自动靠边固定,避免遮挡表单填写区域。
  4. 状态联动配置 依托表单数据动态控制悬浮按钮显隐、禁用:表单草稿状态显示提交悬浮按钮,已办结单据自动隐藏;字段未完善时,导出悬浮按钮锁定不可点击。
  5. 轻量化悬浮层级 按钮常驻页面顶层浮动,不会遮挡表单输入框、子表、图片等原有内容,不破坏原有表单排版结构。

三、适用业务场景

  • 全表单通用快捷操作:全局新增、一键保存、单据打印、数据导出;
  • 审批类表单:悬浮审核通过、驳回、撤回快捷按钮;
  • 明细主子表单:悬浮新增明细、批量删除子数据;
  • 长页面表单:页面底部快捷返回顶部、打开帮助文档。

四、结语

悬浮按钮补齐了常规按钮受布局局限的短板,兼顾丰富交互与灵活摆放两大优势。不用改动原有表单布局,就能新增全局快捷操作,长表单、复杂业务表单优化交互首选组件。

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

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

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

相关推荐
Jeking2172 天前
unione cloud 低代码平台 快速落地设备点检保养管理场景
低代码·流程引擎·表单设计·流程设计·表单引擎·unione cloud
快乐非自愿3 天前
2026 IDC认证低代码平台TOP7|制造业/政务场景可直接复用
人工智能·低代码·制造·政务
图扑软件4 天前
其域创新 × 图扑软件|3DGS 高斯泼溅智慧钢厂实景孪生
前端·低代码·3d·编辑器·图形渲染·可视化
canonical-entropy4 天前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
低代码·ddd·函数式编程·可逆计算·nop平台
SL-staff4 天前
(二十一)「JVS-Rules规则引擎 V2.5」— 决策流的在线调试
低代码·规则引擎·jvs-rules·jvs·模拟测试
SL-staff5 天前
企业文档系统私有化部署方案技术对比:JVS企业文档 vs 语雀 vs 飞书
低代码·私有化部署·飞书·jvs·企业文档·jvs企业文档·生态集成
ZGi.ai5 天前
ZGI工作流引擎:把AI应用的执行过程从黑盒变成流程图
人工智能·低代码·流程图·ai应用·ai工作流·zgi
快乐非自愿6 天前
AI低代码破局:数字化降本增效的核心逻辑与商业落地
人工智能·低代码
SL-staff6 天前
(十九)「JVS-Rules规则引擎 V2.5」— 简单评分卡节点
人工智能·低代码·规则引擎·jvs-rules·决策流·信用评分卡·简单评分卡节点
工业甲酰苯胺7 天前
AI×JNPF实战:3个案例拆解企业数智转型核心逻辑
大数据·数据库·人工智能·低代码