低代码平台核心组件表单设计器 unione-form-editor 组件属性介绍 -- 数值输入框
在企业级低代码表单开发中，数值输入框是数据采集场景的 "刚需组件"，无论是订单数量、金额数值、评分等级，还是项目编号、统计数据，都离不开它的支持。unione-form-editor 数值输入框组件，在文本输入框的基础能力之上，针对性优化了数值场景的校验、格式化与交互体验，通过丰富的属性配置，让你无需编码即可搭建专业、严谨的数值录入场景，下面为你详细拆解它的核心能力。
一、组件属性 Tab 页：数值业务场景全掌控
组件属性 Tab 页是数值输入框的 "配置中枢"，继承了文本输入框的核心模块，同时新增了数值专属配置项，兼顾通用逻辑与场景特性。
1. 基础属性：定义组件核心标识与基础信息
这部分配置与文本输入框保持一致，是组件正常运行的基础，同时支持数值场景的特殊配置：
- 控件名称：组件的显示名称，用于设计界面快速识别，如 "数值输入框"；
- 字段名称：数据存储的唯一标识，需遵循大写字母、数字和下划线组成的规则，且不能是数据库关键字，示例中可配置为 "AMOUNT""QUANTITY" 等，用于关联后端数值类型字段；
- 字段标题：表单中向用户展示的标签文本，如 "订单金额""商品数量"，明确告知用户该输入项的含义；
- 默认值：设置组件初始显示的数值，如金额默认值 0、数量默认值 1，减少用户重复输入；
- 输入提示：占位符文本，引导用户按要求输入内容，如 "请输入订单金额（元）"；
- 控件提示 / 帮助信息：额外的说明文字，可用于补充业务规则、数值范围等，如 "金额需大于 0 且保留两位小数"，降低用户填写疑问。
2. 表单验证：数值数据合规性强保障
针对数值场景的校验需求，提供比文本输入更精准的校验能力，确保数据的准确性与合规性：
- 是否必填：开启后用户必须填写该字段，否则表单无法提交，适用于金额、数量等核心业务字段；
- 数值范围限制：支持设置最小值、最大值，如金额不低于 0、数量不超过库存上限，避免无效数值录入；
- 小数位数控制：自定义保留小数位数，如金额保留 2 位小数、评分保留 1 位小数，适配不同业务的精度要求；
- 预设规则：内置常用数值校验规则（如正整数、非负数、百分比格式等），一键启用即可实现格式校验；
- 自定义规则：支持编写校验逻辑，满足特殊业务的数值校验需求，如 "金额需为 100 的倍数"；
- 错误提示：自定义校验失败时的提示文案，如 "请输入 0-10000 之间的数值，保留两位小数"，提升用户体验；
- 触发机制：设置校验触发时机（如输入时、失焦时、提交时），平衡校验实时性与用户体验。
3. 功能属性：数值场景专属交互优化
在文本输入框的基础功能上，新增了大量数值场景专属配置，让录入体验更贴合业务需求：
- 前缀 / 后缀：设置输入框前后的文本标识，如金额输入的 "¥"、百分比输入的 "%"、数量输入的 "件"，简化用户输入，提升可读性；
- 前置 / 后置图标：为输入框添加图标，如金额图标、数量图标，提升界面美观度与辨识度；
- 数值步进控制：支持设置步长，点击加减按钮时数值按步长增减，如步长为 1（数量）、步长为 0.01（金额），减少手动输入错误；
- 输入统计：开启后实时显示用户已输入的字符数量，同时支持显示数值范围提示；
- 能否清空：开启后输入框右侧会出现清空按钮，方便用户快速清除内容；
- 是否只读 / 禁用 / 隐藏：灵活控制组件的交互状态，适用于信息展示、流程控制等场景，如审批流程中仅可查看金额、不可修改；
- 显示标题：控制字段标题是否在表单中显示，适配紧凑布局或无标题表单设计。
4. 事件设置：动态数值交互与联动
继承了文本输入框的事件能力，同时支持数值场景的联动逻辑，实现表单的动态响应：
- 变化事件：用户输入数值发生变化时触发，可用于实时计算（如根据数量 × 单价计算总价）、联动其他组件（如根据金额等级切换税率）等场景；
- 动态标题：根据业务逻辑动态修改字段标题，如根据用户选择的 "商品类型" 切换为 "商品重量（kg）""商品数量（件）"；
- 禁用 / 显示 / 必填事件：通过条件判断控制组件的禁用、显示 / 隐藏、必填状态，如当订单类型为 "免费订单" 时，金额输入框自动隐藏；
- 失去焦点事件：用户离开输入框时触发，可用于延迟校验、数据联动等场景；
- 格式化显示：对用户输入的数值进行格式化处理，如金额千分位分隔（10000 显示为 10,000）、百分比自动转换（0.8 显示为 80%），提升数据可读性；
- 所有事件均支持代码编辑，可自定义业务逻辑，也可开启 "显示代码" 查看事件配置详情。
二、组件样式 Tab 页：多端适配与界面美化
与文本输入框保持一致的样式配置能力，同时适配数值输入框的界面特性，让表单既实用又美观：
- 多端显示：支持单独配置组件在 PC 端、移动端是否显示，适配不同终端的表单布局需求；
- 栅格显示：基于 24 栅格系统，可调节组件在表单中的宽度占比（范围 2-24），灵活适配不同布局，如金额输入框可设置为占比 8，适配表单整体排版；
- 标题宽度 / 控件宽度：自定义字段标题和输入框的宽度，适配表单整体排版；
- Class 名称：支持自定义 CSS 类名，可通过外部样式文件对组件进行深度美化，满足品牌化、个性化的界面需求，如给金额输入框添加特殊颜色标识。
结语
unione-form-editor 数值输入框组件，既继承了文本输入框的高可配置性与强扩展性，又针对性优化了数值场景的校验、格式化与交互能力，让你无需编写复杂代码，即可快速搭建从简单数据录入到复杂业务计算的各类数值场景。无论是订单管理、财务系统，还是统计报表、业务审批，都能轻松应对。
目前项目已在 GitHub、Gitee 开源，欢迎前往点亮 Star，获取完整源码、查看详细教程，参与社区共建，一起打造更强大的低代码表单设计工具！
GitHub 项目地址：https://github.com/unione-cloud/unione-form-editor
Gitee 项目地址 ：https://gitee.com/unione-cloud/unione-form-editor