NumberBox 步进器

NumberBox 步进器 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过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

注意： 自1.4.5版本起，step参数支持小数值，如1.1、0.3等 1.4.5

下面示例每次都会加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