NumberBox

This component is generally used in the scene where the number of items is selected for shopping in the mall

Note: This input box can only enter integers greater than or equal to 0

平台兼容性

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage

Bind the initial value of value through v-model, this value is two-way bound, no need to reassign the returned value to value in the callback.

vue

<template>
    <wu-number-box v-model="value" @change="valChange"></wu-number-box>
</template>
<script>
export default {
    data() {
        return {
            value: 0
        }
    },
    methods: {
        valChange(e) {
            console.log('The current value is: ' + e.value)
        }
    }
}
</script>

<template>
    <wu-number-box v-model="value" @change="valChange"></wu-number-box>
</template>
<script>
export default {
    data() {
        return {
            value: 0
        }
    },
    methods: {
        valChange(e) {
            console.log('The current value is: ' + e.value)
        }
    }
}
</script>

Step size setting

Use the step attribute to set the value that changes each time the increase or decrease button is clicked. The default is 1. The following example will add 2 or subtract 2 each time

vue

<wu-number-box :step="2"></wu-number-box>

<wu-number-box :step="2"></wu-number-box>

Limit input range

Limit the input value minimum and maximum value by min and max parameters

vue

<wu-number-box :min="1" :max="100"></wu-number-box>

<wu-number-box :min="1" :max="100"></wu-number-box>

Limit input to only integers

Restrict input type by integer

vue

<wu-number-box integer></wu-number-box>

<wu-number-box integer></wu-number-box>

disable

vue

<!-- Disable the input box by setting the `disabled` parameter. In the disabled state, you cannot click the plus and minus buttons or modify the value of the input box -->
<wu-number-box :disabled="true"></wu-number-box>

<!-- disable input box -->
<wu-number-box :disabledInput="true"></wu-number-box>

<!-- Disable add button -->
<wu-number-box :disablePlus="true"></wu-number-box>

<!-- Disable the decrease button -->
<wu-number-box :disableMinus="true"></wu-number-box>

<!-- Disable long press -->
<wu-number-box :longPress="false"></wu-number-box>

<!-- Disable the input box by setting the `disabled` parameter. In the disabled state, you cannot click the plus and minus buttons or modify the value of the input box -->
<wu-number-box :disabled="true"></wu-number-box>

<!-- disable input box -->
<wu-number-box :disabledInput="true"></wu-number-box>

<!-- Disable add button -->
<wu-number-box :disablePlus="true"></wu-number-box>

<!-- Disable the decrease button -->
<wu-number-box :disableMinus="true"></wu-number-box>

<!-- Disable long press -->
<wu-number-box :longPress="false"></wu-number-box>

fixed number of decimal places

Use step to set the step length, and decimal-length to set the number of decimal places

vue

<wu-number-box step="0.25" decimal-length="1"></wu-number-box>

<wu-number-box step="0.25" decimal-length="1"></wu-number-box>

Asynchronous changes

Set the asynchronous change through asyncChange, you need to manually control the input value after it is turned on (default false)

vue

<template>
	<wu-number-box v-model="value" :asyncChange="true" @change="onChange"></wu-number-box>
</template>
<script>
	export default {
		data() {
			return {
				value: 1
			}
		},
		methods: {
			onChange(e) {
				uni.showLoading({
					title: 'Loading',
					mask: true
				})
				setTimeout(() => {
					this.value = this.value + 1;
					uni.hideLoading();
				}, 1000)
			}
		}
	}
</script>

<template>
	<wu-number-box v-model="value" :asyncChange="true" @change="onChange"></wu-number-box>
</template>
<script>
	export default {
		data() {
			return {
				value: 1
			}
		},
		methods: {
			onChange(e) {
				uni.showLoading({
					title: 'Loading',
					mask: true
				})
				setTimeout(() => {
					this.value = this.value + 1;
					uni.hideLoading();
				}, 1000)
			}
		}
	}
</script>

Custom color and size

Set button size via button-size parameter
Set the icon style of plus and minus button via icon-style parameter

vue

<wu-number-box button-size="36" color="#ffffff" bgColor="#2979ff" iconStyle="color: #fff"></wu-number-box>

<wu-number-box button-size="36" color="#ffffff" bgColor="#2979ff" iconStyle="color: #fff"></wu-number-box>

Custom slots

vue

<template>
	<view class="" style="padding: 50rpx">
		<wu-number-box v-model="value">
			<template #minus>
				<view slot="minus" class="minus">
					<wu-icon name="minus" size="12"></wu-icon>
				</view>
			</template>
			<template #input>
				<text style="width: 50px;text-align: center;" class="input">{{value}}</text>
			</template>
			<template #plus>
				<view class="plus">
					<wu-icon name="plus" color="#FFFFFF" size="12"></wu-icon>
				</view>
			</template>
		</wu-number-box>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/wu-ui-tools/libs/css/components.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;
		font-size: 20px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>

<template>
	<view class="" style="padding: 50rpx">
		<wu-number-box v-model="value">
			<template #minus>
				<view slot="minus" class="minus">
					<wu-icon name="minus" size="12"></wu-icon>
				</view>
			</template>
			<template #input>
				<text style="width: 50px;text-align: center;" class="input">{{value}}</text>
			</template>
			<template #plus>
				<view class="plus">
					<wu-icon name="plus" color="#FFFFFF" size="12"></wu-icon>
				</view>
			</template>
		</wu-number-box>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/wu-ui-tools/libs/css/components.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;
		font-size: 20px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>

API

NumberBox Props

property name	description	type	default value	optional values
value / modelValue / v-model	The value used for two-way binding, set to the default min value (minimum value) during initialization	String / Number	1	-
name	The stepper identifier, returned in the change callback	String / Number	-	-
min	The minimum value that the user can enter	String / Number	1	-
max	The maximum value that can be entered by the user	String / Number	`Number.MAX_SAFE_INTEGER`	-
step	Step size, the value added or subtracted each time, supports decimal values, if decimals are required	String / Number	1	-
integer	Whether only positive integers can be entered	Boolean	false	true / false
disabled	Whether to disable operations, including input boxes, plus and minus buttons	Boolean	false	true / false
disabledInput	Whether to prohibit the input box	Boolean	false	true / false
asyncChange	Whether to enable asynchronous change, after enabling it, you need to manually control the input value	Boolean	false	true / false
inputWidth	Input box width, unit px	String / Number	35	-
showMinus	Whether to show the decrease button	Boolean	true	true / false
showPlus	Whether to display the add button	Boolean	true	true / false
decimalLength	number of decimal places to display	String / Number	-	-
longPress	Whether to allow long press to add and subtract	Boolean	true	true / false
color	The color of the input box text and the plus and minus button icons	String	#323233	-
buttonSize	Button size, width and height are equal to this value, unit px, input box height is consistent with this value	String / Number	30	-
bgColor	The background color of input boxes and buttons	String	#EBECEE	-
cursorSpacing	Specify the distance between the cursor and the keyboard to prevent the keyboard from covering the input box, the unit is px	String / Number	100	-
disableMinus	Whether to disable the decrease button	Boolean	true	true / false
disablePlus	Whether to disable the add button	Boolean	true	true / false
iconStyle	The style of the plus and minus button icons	String	-	-

NumberBox Events

Event Name	Description	Callback Parameters
focus	The input box is triggered by focus (when the button is clickable), in the form of an object	value: the current value of the input box, name: the stepper identifier
blur	Triggered when the input box loses focus, in the form of an object	value: the current value of the input box, name: the stepper identifier
change	Triggered when the content of the input box changes, in the form of an object	value: the current value of the input box, name: the stepper identifier
overlimit	Triggered when the range threshold is exceeded	type: (`minus` has reached the minimum value, `plus` has reached the maximum value)

NumberBox Slots

slot name	illustrate
minus	reduce button
input	input
plus	add button

NumberBox ​

平台兼容性 ​

Basic usage ​

Step size setting ​

Limit input range ​

Limit input to only integers ​

disable ​

fixed number of decimal places ​

Asynchronous changes ​

Custom color and size ​

Custom slots ​

API ​

NumberBox Props ​

NumberBox Events ​

NumberBox Slots ​