Skip to content

n-number-box 数字选择器 ​

减号 / 值 / 加号三段结构:点按加减按钮步进一步,长按可连发;加减按钮与符号均为 view 自绘(无原生 button、无字体文件)。值按 decimalLength 固定小数位显示,步进运算在整数空间进行,0.1 类小数步长无浮点累加误差。

  1. 值绑定走手动双向(组件支持 v-model,也可显式监听更新事件)::model-value + @update:model-value
  2. 值区为格式化展示,不是可输入框——数量调节的主路径是点按与长按连发;禁用或到达边界时对应按钮降透明(保留色相)并拦截
  3. 传入值超出 [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 定制三通道
振动反馈 三参考源均未提供 无收录依据,不设

记录 · 思考 · 创作