Skip to content

mms-number-box 步进器

简述

通过加减按钮调整数量,中间为只读数值展示。

注意

注意: 请以 uni_modules/mms-unix 与本文为准;各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力(相册、定位、剪贴板、手机号等)需在 manifest 与后台完成配置。

平台差异说明

App(vue)App(nvue)H5小程序

基本使用

  • 路径:pages_demo/ext/number-box/number-box(分包 pages_demo

双向绑定

写法说明
v-model:value推荐。当前数值
:value + @change手动同步

Props

属性类型默认值说明
valueNumber / String1当前值
minNumber1最小值
maxNumber99最大值
stepNumber1步长,可为小数
disabledBooleanfalse禁用
iconBgColorStringtransparent两侧按钮背景
radiusBooleantrue按钮是否圆形
iconSizeNumber26加减符号字号(rpx)
iconColorString#666666加减符号颜色
heightNumber42中间区域高度(rpx)
widthNumber80中间区域宽度(rpx)
sizeNumber28中间数字字号(rpx)
backgroundColorString#F5F5F5中间区背景
colorString#333333中间数字颜色
indexNumber / String0实例索引,change 回传
customNumber / String0业务标识,change 回传(解析为数字)

Events

事件载荷说明
update:valuenumberv-model:value 同步
change{ value, type, index, custom }typeplus / reduce

示例

html
<mms-number-box v-model:value="qty" :min="1" :max="10" :step="1" />

注意事项

  • 不可直接键盘输入中间数字;仅通过加减变更。
  • 异步校验场景:可在 @change 内请求接口,失败时将父级 value 恢复为旧值。

Released under the MIT License.