跳到主要内容

数字输入框

用于纯数字输入的场景。

一、何时使用​

当用户需要输入数字时，使用数字输入框可避免非数字输入，提高输入准确性。

典型场景包括：

  • 商品数量输入
  • 班级人数填写
  • 身高录入
  • 期望薪资输入

二、属性配置​

1. 数据​

数据配置

1.1 数据绑定​

支持绑定字段数据，作为输入值的来源：

字段绑定

1.2 初始值​

初始值用于页面加载时的默认数字，可通过：

  • 手动赋值

    手动赋值效果

  • 视图参数

    视图参数效果

2. 功能设置​

功能设置

2.1 占位提示​

在输入框中提示用户输入格式或内容：

占位提示

2.2 最小值​

限制用户输入的最小数值（如：0）：

最小值

2.3 最大值​

限制用户输入的最大数值（如：100）：

最大值

2.4 前缀​

前缀内容可用于标明单位、含义或附加图标：

  • 文字形式：

    前缀文字

  • 图标形式（徽标）：

    前缀图标

2.5 后缀​

后缀用于补充提示信息或单位说明：

  • 文字形式：

    后缀文字

  • 图标形式（徽标）：

    后缀图标

2.6 支持清除​

启用后，用户可点击图标快速清除输入内容：

支持清除

3. 外观​

3.1 尺寸设置​

提供普通尺寸与大尺寸可选，适配不同UI需求：

  • 普通尺寸 vs 大尺寸对比：

    尺寸对比

    尺寸配置

4. 状态​

暂无特殊状态，详见：通用状态。

三、规则​

1. 表单校验​

可配置是否为必填、是否允许小数等校验规则。

2. 显示控制​

可根据条件动态控制输入框的显示或隐藏。

四、样式​

暂无独立样式配置，详见：通用样式。

五、常见使用场景​

1. 期望薪资输入​

薪资输入

2. 商品数量填写​

商品数量

3. 身高信息录入​

身高录入