该组件一般用于商城购物选择物品数量的场景
注意:该输入框只能输入大于或等于0的整数
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
#基本使用
通过v-model
绑定value
初始值,此值是双向绑定的,无需在回调中将返回的数值重新赋值给value
。
<template>
<u-number-box v-model="value" @change="valChange"></u-number-box>
</template>
<script>
export default {
data() {
return {
value: 0
}
},
methods: {
valChange(e) {
console.log('当前值为: ' + e.value)
}
}
}
</script>
#步长设置
- 通过
step
属性设置每次点击增加或减少按钮时变化的值,默认为1,下面示例每次都会加2或者减2
<u-number-box :step="2"></u-number-box>
#限制输入范围
通过min
和max
参数限制输的入值最小值和最大值
<u-number-box :min="1" :max="100"></u-number-box>
#限制只能输入整数
通过integer
限制输入类型
<u-number-box integer></u-number-box>
</