NumberBox 步进器

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

注意：该输入框只能输入大于或等于0的整数

平台兼容性

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

基本使用

通过 v-model 绑定 value 初始值，此值是双向绑定的，无需在回调中将返回的数值重新赋值给 value。

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('当前值为: ' + 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('当前值为: ' + e.value)
			}
		}
	}
</script>

步长设置

通过 step 属性设置每次点击增加或减少按钮时变化的值，默认为1，下面示例每次都会加2或者减2

vue

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

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

限制输入范围

通过 min 和 max 参数限制输的入值最小值和最大值

vue

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

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

限制只能输入整数

通过 integer 限制输入类型

vue

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

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

禁用

vue

<!-- 通过设置`disabled`参数来禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值 -->
<wu-number-box :disabled="true"></wu-number-box>

<!-- 禁用输入框 -->
<wu-number-box :disabledInput="true"></wu-number-box>

<!-- 禁用增加按钮 -->
<wu-number-box :disablePlus="true"></wu-number-box>

<!-- 禁用减少按钮 -->
<wu-number-box :disableMinus="true"></wu-number-box>

<!-- 禁用长按 -->
<wu-number-box :longPress="false"></wu-number-box>

<!-- 通过设置`disabled`参数来禁用输入框，禁用状态下无法点击加减按钮或修改输入框的值 -->
<wu-number-box :disabled="true"></wu-number-box>

<!-- 禁用输入框 -->
<wu-number-box :disabledInput="true"></wu-number-box>

<!-- 禁用增加按钮 -->
<wu-number-box :disablePlus="true"></wu-number-box>

<!-- 禁用减少按钮 -->
<wu-number-box :disableMinus="true"></wu-number-box>

<!-- 禁用长按 -->
<wu-number-box :longPress="false"></wu-number-box>

固定小数位数

通过 step 设置步进长度，decimal-length 设置显示小数位数

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>

异步变更

通过 asyncChange 设置异步变更，开启后需要手动控制输入值（默认 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: '加载中',
					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: '加载中',
					mask: true
				})
				setTimeout(() => {
					this.value = this.value + 1;
					uni.hideLoading();
				}, 1000)
			}
		}
	}
</script>

自定义颜色和大小

通过 button-size 参数设置按钮大小
通过 icon-style 参数设置加减按钮图标的样式

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>

自定义 slot

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

属性名	说明	类型	默认值	可选值
value / modelValue / v-model	用于双向绑定的值，初始化时设置设为默认min值(最小值)	String / Number	1	-
name	步进器标识符，在change回调返回	String / Number	-	-
min	用户可输入的最小值	String / Number	1	-
max	用户可输入的最大值	String / Number	`Number.MAX_SAFE_INTEGER`	-
step	步长，每次加或减的值，支持小数值，如需小数	String / Number	1	-
integer	是否只能输入正整数	Boolean	false	true / false
disabled	是否禁用操作，包括输入框，加减按钮	Boolean	false	true / false
disabledInput	是否禁止输入框	Boolean	false	true / false
asyncChange	是否开启异步变更，开启后需要手动控制输入值	Boolean	false	true / false
inputWidth	输入框宽度，单位px	String / Number	35	-
showMinus	是否显示减少按钮	Boolean	true	true / false
showPlus	是否显示增加按钮	Boolean	true	true / false
decimalLength	显示的小数位数	String / Number	-	-
longPress	是否允许长按进行加减	Boolean	true	true / false
color	输入框文字和加减按钮图标的颜色	String	#323233	-
buttonSize	按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致	String / Number	30	-
bgColor	输入框和按钮的背景颜色	String	#EBECEE	-
cursorSpacing	指定光标于键盘的距离，避免键盘遮挡输入框，单位px	String / Number	100	-
disableMinus	是否禁用减少按钮	Boolean	true	true / false
disablePlus	是否禁用增加按钮	Boolean	true	true / false
iconStyle	加减按钮图标的样式	String	-	-

NumberBox Events

事件名	说明	回调参数
focus	输入框得到焦点触发(按钮可点击情况下)，对象形式	value：输入框当前值，name：步进器标识符
blur	输入框失去焦点时触发，对象形式	value：输入框当前值，name：步进器标识符
change	输入框内容发生变化时触发，对象形式	value：输入框当前值，name：步进器标识符
overlimit	超过范围阈值时触发	type：( `minus` 已达最小值，`plus` 已达最大值)

NumberBox Slots

插槽名	说明
minus	减少按钮
input	输入框
plus	增加按钮

NumberBox 步进器 ​

平台兼容性 ​

基本使用 ​

步长设置 ​

限制输入范围 ​

限制只能输入整数 ​

禁用 ​

固定小数位数 ​

异步变更 ​

自定义颜色和大小 ​

自定义 slot ​

API ​

NumberBox Props ​

NumberBox Events ​

NumberBox Slots ​