NumberBox 步进器

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

注意：该输入框只能输入大于或等于0的整数，不支持小数输入

平台差异说明

基本使用

通过value(默认为1)参数绑定初始值，通过change事件监听组件输入值的变化，回调参数为一个对象，有两个属性，分别是：

• value，表示当前输入值
• index，额外字段，由用户通过Props的index字段传入，回调时用以区分当前发生变化的是哪个输入框

<template>
    <u-number-box :value="0" @change="valChange"></u-number-box>
</template>
<script>
    export default {
        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>

禁用状态

通过设置disabled参数来禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值

<u-number-box :disabled="true"></u-number-box>

自定义大小

• 通过input-width参数设置输入框的宽度
• 通过input-height参数设置输入框和按钮的高度，单位都是rpx

<u-number-box :input-width="100" :input-height="60"></u-number-box>

API

Props

Events