组件：数字输入框

数字输入框组件用于精确的数字输入，支持通过步进按钮（上下箭头）调整数值，也可手动输入。可设置数值范围（最小/最大值）、步长、小数精度，并支持禁用状态和值改变回调。适用于数量选择、金额输入、数值配置等需要精确数字输入的场景。

典型使用场景：

商品数量选择（购物车、下单）
金额输入（价格设置、预算）
数值参数配置（图表设置、系统参数）
表单中的数字字段（年龄、评分、百分比）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置数值范围	`最小值` / `最大值`	`数字输入框1.最小值 = 0`，`数字输入框1.最大值 = 100`
设置步长（每次增减的值）	`步长`	`数字输入框1.步长 = 5`
设置小数精度	`精度`	`数字输入框1.精度 = 2`
设置当前值	`值`	`数字输入框1.值 = 75`
禁用/启用输入框	`禁用`	`数字输入框1.禁用 = 真`
设置值改变回调	`置输入被改变回调(回调函数)`	`数字输入框1.置输入被改变回调((源对象, 值) => { ... })`

样式美化参考

数字输入框的外观可通过继承的视图属性进行调整：

整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #d9d9d9"）、边框圆角（建议 "6px"）等属性美化。
字体样式：通过 字体大小（建议 "14px"）、文本颜色 控制输入数字的外观。
内边距：使用 内边距（如 "8px 12px"）控制输入框内边距。
按钮样式：内置的增减按钮样式由组件内部管理，但可通过 CSS 类或全局样式覆盖。
禁用状态：禁用 = 真 时，输入框变灰且不可交互。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-number-input {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
    transition: border-color 0.3s;
}
.my-number-input:focus {
    border-color: #1890ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.my-number-input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

在代码中应用样式类：数字输入框1.添加样式类("my-number-input")

基础示例

创建一个数量选择器，范围 1~99，步长 1，初始值为 10。

变量 数字输入框1 = 创建 数字输入框()
数字输入框1.左边 = 50
数字输入框1.顶边 = 50
数字输入框1.宽度 = 120
数字输入框1.高度 = 36
数字输入框1.边框 = "1px solid #d9d9d9"
数字输入框1.边框圆角 = "6px"
数字输入框1.内边距 = "8px 12px"
数字输入框1.字体大小 = "14px"
数字输入框1.最小值 = 1
数字输入框1.最大值 = 99
数字输入框1.步长 = 1
数字输入框1.精度 = 0
数字输入框1.值 = 10

数字输入框1.置输入被改变回调((源对象, 当前值) => {
    调试输出("当前值：" + 当前值)
})

添加组件(数字输入框1)

综合示例：购物车商品数量控制

本示例模拟购物车场景，包含商品名称、单价、数量输入框（带加减按钮）、小计金额显示，并联动更新总价。

' ========== 创建商品信息展示 ==========
变量 商品容器 = 创建 弹性布局()
商品容器.方向 = "row"
商品容器.侧轴对齐 = "center"
商品容器.左边 = 30
商品容器.顶边 = 30
商品容器.宽度 = 500
商品容器.间距 = 16
商品容器.背景颜色 = "#ffffff"
商品容器.边框 = "1px solid #e8e8e8"
商品容器.边框圆角 = "8px"
商品容器.内边距 = "16px"
添加组件(商品容器)

' 商品名称
变量 名称标签 = 创建 标签()
名称标签.文本 = "📱 智能手机"
名称标签.字体大小 = "16px"
名称标签.字体粗细 = "bold"
名称标签.宽度 = 120
商品容器.添加组件(名称标签)

' 单价
变量 单价标签 = 创建 标签()
单价标签.文本 = "单价：¥2999"
单价标签.字体大小 = "14px"
单价标签.文本颜色 = "#666"
单价标签.宽度 = 100
商品容器.添加组件(单价标签)

' 数量输入框
变量 数量输入 = 创建 数字输入框()
数量输入.宽度 = 100
数量输入.高度 = 32
数量输入.边框 = "1px solid #d9d9d9"
数量输入.边框圆角 = "4px"
数量输入.内边距 = "4px 8px"
数量输入.字体大小 = "14px"
数量输入.最小值 = 1
数量输入.最大值 = 999
数量输入.步长 = 1
数量输入.精度 = 0
数量输入.值 = 1
商品容器.添加组件(数量输入)

' 小计金额
变量 小计标签 = 创建 标签()
小计标签.文本 = "小计：¥2999"
小计标签.字体大小 = "16px"
小计标签.字体粗细 = "bold"
小计标签.文本颜色 = "#ff4d4f"
小计标签.宽度 = 120
商品容器.添加组件(小计标签)

' ========== 总价汇总显示 ==========
变量 总价标签 = 创建 标签()
总价标签.左边 = 30
总价标签.顶边 = 110
总价标签.文本 = "总价：¥2999"
总价标签.字体大小 = "18px"
总价标签.字体粗细 = "bold"
总价标签.文本颜色 = "#ff4d4f"
添加组件(总价标签)

' ========== 更新金额函数 ==========
函数 更新金额()
    变量 数量 = 数量输入.值
    变量 单价 = 2999
    变量 小计 = 单价 * 数量
    小计标签.文本 = "小计：¥" + 小计
    总价标签.文本 = "总价：¥" + 小计
结束 函数

' ========== 绑定事件 ==========
数量输入.置输入被改变回调((源对象, 当前值) => {
    更新金额()
})

' 初始化显示
更新金额()

属性详解

最小值

类型： 数值型
说明： 设置或获取允许输入的最小数值。当用户通过步进按钮或手动输入的值小于此值时，会自动修正为 最小值。默认无限制（实际受浏览器控制，通常为 -Infinity）。

最大值

类型： 数值型
说明： 设置或获取允许输入的最大数值。当用户通过步进按钮或手动输入的值大于此值时，会自动修正为 最大值。默认无限制。

步长

类型： 数值型
说明： 设置或获取每次点击加减按钮时数值的变化量。例如步长为 5，则点击“+”按钮值增加 5，点击“-”按钮值减少 5。默认 1。

精度

类型： 数值型
说明： 设置或获取显示的小数位数，控制数值的精度。取值说明：
- -1：自动精度（根据输入值保留合适的小数位，通常保留输入时的精度）。
- 0：整数，不显示小数位（默认）。
- > 0：固定小数位数，例如 2 表示显示两位小数，输入 1.234 会显示 1.23（四舍五入）。
注意：此属性仅影响显示，内部值仍是完整精度，计算时以实际值为准。

值

类型： 数值型
说明： 设置或获取当前输入框的数值。设置后会自动校验是否在 最小值~最大值 范围内，并按照 精度 格式化显示。

禁用

类型： 逻辑型
说明： 设置或获取是否禁用输入框。禁用后，用户无法输入或点击步进按钮，样式变灰。默认为 假。

函数详解

置值(值)

功能： 以编程方式设置当前值，效果等同于直接修改 值 属性。设置后会自动触发 置输入被改变回调。
参数： 值（数值型），需在 最小值 和 最大值 之间。
返回值： 无。
示例： 数字输入框1.置值(50)

置输入被改变回调(回调函数)

功能： 设置当数值发生变化时的回调函数。变化来源包括用户点击步进按钮、手动输入（失去焦点或按回车键）以及通过 置值 或 值 属性设置。
参数： 回调函数，格式为 (源对象, 当前值) => { ... }。
- 源对象：触发事件的数字输入框组件本身。
- 当前值：变化后的数值（数值型）。
返回值： 无。

示例：

数字输入框1.置输入被改变回调((源对象, 当前值) => {
    调试输出("当前值：" + 当前值)
})

事件说明

输入被改变(源对象, 当前值)

功能： 与 置输入被改变回调 等效，适用于设计文件（.spldg）中定义的组件。