uni-number-box

带加减按钮的数字输入框，常见于购物车商品数量选择

带加减按钮的数字输入框，常见于购物车商品数量选择。

基本用法

<uni-number-box v-model="value" />

示例源码如下，请查看 pre > code 标签中的内容

<uni-number-box v-model="value" />

设置范围

<uni-number-box v-model="value" :min="5" :max="20" />

示例源码如下，请查看 pre > code 标签中的内容

<uni-number-box v-model="value" :min="5" :max="20" />

设置步长

<!-- 整数步长 -->
<uni-number-box v-model="value" :step="5" />

<!-- 小数步长 -->
<uni-number-box v-model="value" :step="0.1" />

示例源码如下，请查看 pre > code 标签中的内容

<!-- 整数步长 -->
<uni-number-box v-model="value" :step="5" />

<!-- 小数步长 -->
<uni-number-box v-model="value" :step="0.1" />

禁用状态

<uni-number-box :value="5" :disabled="true" />

示例源码如下，请查看 pre > code 标签中的内容

<uni-number-box :value="5" :disabled="true" />

自定义样式

通过 btn-class、input-class、icon-class 自定义组件样式：

<uni-number-box v-model="value" btn-class="custom-btn" input-class="custom-input" icon-class="custom-icon" />

示例源码如下，请查看 pre > code 标签中的内容

<uni-number-box v-model="value" btn-class="custom-btn" input-class="custom-input" icon-class="custom-icon" />

.custom-btn {
  background-color: #007aff;
}
.custom-input {
  background-color: #e8f4ff;
  color: #007aff;
}
.custom-icon {
  background-color: #fff;
}

示例源码如下，请查看 pre > code 标签中的内容

.custom-btn {
  background-color: #007aff;
}
.custom-input {
  background-color: #e8f4ff;
  color: #007aff;
}
.custom-icon {
  background-color: #fff;
}

Events

事件名	说明	回调参数
change	值改变时触发	value: number
focus	输入框聚焦时触发	event: UniInputFocusEvent
blur	输入框失焦时触发	event: UniInputBlurEvent

兼容性

Web	微信小程序	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
4.0	4.41	3.9	4.11	4.61	5.08

属性

名称	类型	默认值	兼容性	描述
value	number | undefined	-	-	输入框当前值，不使用 v-model 时通过该属性传入初始值
modelValue	number | undefined	-	-	v-model 绑定值，支持双向绑定
min	number | undefined	-	-	允许输入的最小值
max	number | undefined	-	-	允许输入的最大值
step	number | undefined	-	-	每次点击加/减按钮改变的步长，支持小数
disabled	boolean | undefined	-	-	是否禁用组件，禁用时输入框和加减按钮都不可操作
btnClass	classString	-	-	-
inputClass	classString	-	-	-
iconClass	classString	-	-	-
@change	Function	-	-	值改变时触发，参数为当前值
@focus	Function	-	-	输入框聚焦时触发
@blur	Function	-	-	输入框失焦时触发
@update:modelValue	Event	-	-	-

参见

• 相关 Bug