n-number-box 数字选择器
减号 / 值 / 加号三段结构:点按加减按钮步进一步,长按可连发;加减按钮与符号均为 view 自绘(无原生 button、无字体文件)。值按 decimalLength 固定小数位显示,步进运算在整数空间进行,0.1 类小数步长无浮点累加误差。
- 值绑定走手动双向(组件支持 v-model,也可显式监听更新事件):
:model-value+@update:model-value- 值区为格式化展示,不是可输入框——数量调节的主路径是点按与长按连发;禁用或到达边界时对应按钮降透明(保留色相)并拦截
- 传入值超出
[min, max]时按边界夹取显示与运算,无需自行兜底
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value | 当前值;超出 [min, max] 的部分按边界夹取显示与运算 | Number | 0 | - |
| min | 最小值,减号到达后自动不可用(降透明并拦截) | Number | 1 | - |
| max | 最大值,加号到达后自动不可用(降透明并拦截) | Number | 999999999 | - |
| step | 步长,支持小数;运算在整数空间进行,无浮点累加误差 | Number | 1 | - |
| decimal-length | 值显示的小数位数(≥0 整数,按位取整显示);步长小数位更多时按步长精度运算 | Number | 0 | - |
| disabled | 整体禁用(保留配色降透明度,拦截加减点按与长按连发) | Boolean | false | - |
| disable-plus | 仅禁用加号(保色相降透明,拦截加向步进),适合"仅减库存"等单向场景 | Boolean | false | - |
| disable-minus | 仅禁用减号(保色相降透明,拦截减向步进) | Boolean | false | - |
| input-width | 值区宽度(px),0 = 用默认宽度(主题令牌 --n-number-box-value-width) | Number | 0 | - |
| custom-class | 挂到根节点的额外 class(需是组件样式表内已定义的类) | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 值变化后触发(点按/长按加减);配合 :model-value 手动双向绑定 | 最新值(Number) |
| change | 值变化后触发(语义化入口,与 update:model-value 同时发出) | 最新值(Number) |
机制与定制
值区为何不是可输入框
数量调节的主路径是点按与长按连发,值区定位为格式化展示:显示与输出精度由组件统一保证,浮点误差为零。值区直嵌输入框涉及软键盘联动、焦点管理与受控文本同步等端差异较大的链路,作为独立能力另行演进;当前需要键入数值的场景由页面搭配原生 input 组合(键入后把数值回写到 model-value 即可,越界由组件自动夹取)。inputWidth 沿业界同类组件惯例命名,指值区宽度。
长按连发与守卫
点按立即步进一步;按住约 400ms 后进入连发(约 120ms 一步),松手或滑出按钮即停。触摸之外的输入(桌面 Web 鼠标)由 tap 通道步进;触摸手势收束后短窗口内跟发的 tap(含多指抬指的多个 tap)一律拦下,不会双步进。重复触摸(多指并按)先清掉上一手势的定时器再起步,句柄不叠加不泄漏。连发过程实时校验守卫——到达边界、被禁用会自动收束,不会发出越界值。
主题令牌
改全局风格调主题令牌(或 uni.scss 覆盖同名 SCSS 变量):--n-number-box-height(整体高度,默认 40px,保证触控目标)、--n-number-box-btn-width(加减按钮宽)、--n-number-box-radius(圆角,输入档 8px)、--n-number-box-value-width(值区默认宽)、--n-number-box-value-size(值文字字号)、--n-number-box-press-opacity(按压透明度)、--n-number-box-disabled-opacity(禁用/不可用透明度)。个别微调走 custom-class / custom-style。
机制对照
与同类步进器组件(参考实现)的逐机制对照:
| 机制 | 参考做法 | 本库做法 |
|---|---|---|
| 值区输入 | 值区为可编辑 input,配 focus / blur / disabledInput / cursorSpacing / type(负号输入)等属性面 | 格式化展示(决策见「值区为何不是可输入框」);键入场景由页面组合原生 input 回写 model-value |
| 长按连发开关 | longPress prop 可关闭连发 |
连发是核心交付能力常开;不希望连发时避免长按即可(点按始终单步) |
| 按钮显隐 | showPlus / showMinus 隐藏某一侧按钮 |
不收录:单向场景用 disable-plus / disable-minus(保色相降透明,用户能看出该方向不可用,优于按钮凭空消失) |
| 异步受控 | asyncChange prop:等父级回写后才允许下一次步进 |
完全受控天然涵盖——change 回调里不回写 model-value 即冻结值 |
| 整数模式 | integer prop 强制整数 |
decimal-length=0 + 整数 step 即整数语义 |
| 方向事件 | plus / minus / overlimit 事件 |
不收录:change / update:model-value 携带最新值,方向可由前后值差分;越界由不可用方向降透明提示(不发事件) |
| 列表载荷 | change 回传 { value, index, params } 便于列表定位 |
回传裸数值;列表场景由页面闭包携带上下文(库内事件载荷惯例) |
| 表单名 | name prop 供表单收集 |
不收录:库内表单值走显式 v-model 收集,无 name 提交通道 |
| 步进精度 | 放大取整思想(步长小数位决定倍数) | 同源整数空间运算,精度统一为 max(decimalLength, 步长小数位),显示与运算同精度,不丢步长精度 |
| min > max 异常配置 | 夹到 max 并回发 | 双向全部锁定(加减都不可用),显示夹取到 min——异常配置显性失效优于猜测回写 |
| 尺寸/配色族 props | width / height / buttonSize / iconSize / signColor / signWidth / backgroundColor / radius / margin / size 等十余 prop | 主题令牌(--n-number-box-*)+ custom-class / custom-style 定制三通道 |
| 振动反馈 | 三参考源均未提供 | 无收录依据,不设 |