网站开发文档源码百度知道网页版

该组件一般用于商城购物选择物品数量的场景

注意：该输入框只能输入大于或等于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"><viewslot="minus"class="minus"><u-iconname="minus"size="12"></u-icon></view><textslot="input"style="width: 50px;text-align: center;"class="input">{{value}}</text><viewslot="plus"class="plus"><u-iconname="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>