该组件一般用于商城购物选择物品数量的场景
注意：该输入框只能输入大于或等于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>
copy
#步长设置
- 通过
step属性设置每次点击增加或减少按钮时变化的值，默认为1，下面示例每次都会加2或者减2
<u-number-box :step="2"></u-number-box>
copy
#限制输入范围
通过min和max参数限制输的入值最小值和最大值
<u-number-box :min="1" :max="100"></u-number-box>
copy
#限制只能输入整数
通过integer限制输入类型
<u-number-box integer></u-number-box>
copy
#禁用
<!-- 通过设置`disabled`参数来禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值 --> <u-number-box :disabled="true"></u-number-box> <!-- 禁用输入框 --> <u-number-box :disabledInput="true"></u-number-box> <!-- 禁用增加按钮 --> <u-number-box :disablePlus="true"></u-number-box> <!-- 禁用减少按钮 --> <u-number-box :disableMinus="true"></u-number-box> <!-- 禁用长按 --> <u-number-box :longPress="false"></u-number-box>
copy
#固定小数位数
通过step设置步进长度，decimal-length设置显示小数位数
<u-number-box step="0.25" decimal-length="1" ></u-number-box>
copy
#异步变更
通过asyncChange设置异步变更，开启后需要手动控制输入值 （默认 false ）
<template> <u-number-box v-model="value" :asyncChange="true" @change="onChange"></u-number-box> </template> <script> export default { data(){ return { value:1 } }, methods:{ onChange(e){ setTimeout(() => { this.value = this.value + 1; }, 3000) } } } </script>
copy
#自定义颜色和大小
- 通过
button-size参数设置按钮大小 - 通过
icon-style参数设置加减按钮图标的样式
<u-number-box button-size="36" color="#ffffff" bgColor="#2979ff" iconStyle="color: #fff" ></u-number-box>
copy
#自定义 slot
<template> <u-number-box v-model="value"> <view slot="minus" class="minus" > <u-icon name="minus" size="12" ></u-icon> </view> <text slot="input" style="width: 50px;text-align: center;" class="input" >{{value}}</text> <view slot="plus" class="plus" > <u-icon name="plus" color="#FFFFFF" size="12" ></u-icon> </view> </u-number-box> </template> <script> export default { data(){ return { value:1 } } } </script> <style lang="scss"> .minus { width: 22px; height: 22px; border-width: 1px; border-color: #E6E6E6; border-style: solid; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; @include flex; justify-content: center; align-items: center; } .input { padding: 0 10px; } .plus { width: 22px; height: 22px; background-color: #FF0000; border-radius: 50%; /* #ifndef APP-NVUE */ display: flex; /* #endif */ justify-content: center; align-items: center; } </style>
