NumberBox 数字输入框

通过点击按钮或输入数字，调整数值大小。支持自定义按钮图标、步长控制等功能。

代码示例

				
<template>
	<zk-theme type="page" :padding="30"  showBack navbarTitle="步进器">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text  margin="0 0 10rpx 0" text="基础用法" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="最简单的数字输入框" />
			<zk-number-box v-model="value1" />
		</zk-theme>

		<!-- 步长设置 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text  margin="0 0 10rpx 0" text="步长设置" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="设置每次点击增加/减少的值" />
			<view class="demo-item">
				<zk-text type="third" :size="28" text="步长5" />
				<zk-number-box v-model="value2" :step="5" icon-color="#2979ff" />
			</view>
			<view class="demo-item">
				<zk-text type="third" :size="28" text="步长10" />
				<zk-number-box v-model="value2_1" :step="10" icon-color="#2979ff" />
			</view>
		</zk-theme>

		<!-- 限制范围 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text  margin="0 0 10rpx 0" text="限制范围" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="设置可输入的最大最小值" />
			<view class="demo-item">
				<zk-text type="third" :size="28" text="最小值5" />
				<zk-number-box v-model="value3" :min="5" icon-color="#2979ff" />
			</view>
			<view class="demo-item">
				<zk-text type="third" :size="28" text="范围5-10" />
				<zk-number-box v-model="value3_1" :min="5" :max="10" icon-color="#2979ff" />
			</view>
		</zk-theme>

		<!-- 禁用状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text  margin="0 0 10rpx 0" text="禁用状态" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="禁用输入和点击" />
			<zk-number-box v-model="value4" disabled />
		</zk-theme>

		<!-- 自定义风格 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text  margin="0 0 10rpx 0" text="自定义风格" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="支持自定义图标和样式" />
			
			<view class="demo-item">
				<zk-text type="third" :size="28" text="圆形按钮" />
				<view class="round-style">
					<zk-number-box v-model="value5" minus-icon="subtract" plus-icon="add" icon-color="#2979ff" :icon-size="28" />
				</view>
			</view>

			<view class="demo-item">
				<zk-text type="third" :size="28" text="方形按钮" />
				<view class="square-style">
					<zk-number-box v-model="value5_1" icon-color="#2979ff" />
				</view>
			</view>

			<view class="demo-item">
				<zk-text type="third" :size="28" text="填充样式" />
				<view class="filled-style">
					<zk-number-box v-model="value5_2" icon-color="#ffffff" />
				</view>
			</view>
		</zk-theme>

		<!-- 异步变更 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text  margin="0 0 10rpx 0" text="异步变更" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="点击按钮后异步更新数值" />
			<view class="async-style">
				<zk-number-box v-model="value6" :async="true" icon-color="#2979ff" @change="onChange" />
			</view>
		</zk-theme>

		<!-- 购物车示例 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text  margin="0 0 10rpx 0" text="购物车示例" />
			<zk-text type="secondary" :size="24" margin="0 0 30rpx 0" text="实际应用场景展示" />
			<view class="cart-item">
				<image class="cart-item__img" src="/static/product.png" mode="aspectFill" />
				<view class="cart-item__content">
					<zk-text type="primary" :size="28" text="商品标题商品标题商品标题商品标题" />
					<view class="cart-item__bottom">
						<zk-text type="danger" :size="32" weight="bold" text="¥199.00" />
						<view class="cart-number-box">
							<zk-number-box v-model="value7" icon-color="#2979ff" :min="1" :max="99" />
						</view>
					</view>
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 5,
				value2_1: 10,
				value3: 5,
				value3_1: 5,
				value4: 1,
				value5: 1,
				value5_1: 1,
				value5_2: 1,
				value6: 1,
				value7: 1
			}
		},

		methods: {
			onChange({
				value,
				type
			}) {
				uni.showLoading({
					title: '更新中...'
				})

				setTimeout(() => {
					this.value6 = value
					uni.hideLoading()
				}, 500)
			}
		}
	}
</script>
<style>
/* #ifndef APP-NVUE */
.demo-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.demo-item:last-child {
	margin-bottom: 0;
}

/* 圆形按钮样式 */
.round-style :deep(.zk-number-box__minus),
.round-style :deep(.zk-number-box__plus) {
	border-radius: 30rpx;
	background-color: #ecf5ff;
}

/* 方形按钮样式 */
.square-style :deep(.zk-number-box__minus),
.square-style :deep(.zk-number-box__plus) {
	border-radius: 0;
	border: 2rpx solid #2979ff;
	background-color: #ffffff;
}

.square-style :deep(.zk-number-box__input) {
	border: 2rpx solid #dcdfe6;
	background-color: #ffffff;
}

/* 填充样式 */
.filled-style :deep(.zk-number-box__minus),
.filled-style :deep(.zk-number-box__plus) {
	background-color: #2979ff;
}

.filled-style :deep(.zk-number-box__input) {
	background-color: #ffffff;
	border: 2rpx solid #dcdfe6;
}

/* 购物车样式 */
.cart-item {
	display: flex;
	flex-direction: row;
	padding: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
}

.cart-item__img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	background-color: #f5f7fa;
}

.cart-item__content {
	flex: 1;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cart-item__bottom {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.cart-number-box {
	transform: scale(0.9);
	transform-origin: right center;
}
/* #endif */

/* #ifdef APP-NVUE */
.demo-item {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.cart-item {
	flex-direction: row;
	padding: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
}

.cart-item__img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	background-color: #f5f7fa;
}

.cart-item__content {
	flex: 1;
	margin-left: 20rpx;
	flex-direction: column;
	justify-content: space-between;
}

.cart-item__bottom {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
/* #endif */
</style>

API

Props 属性

参数	说明	类型	默认值
value	当前输入值	number / string	1
min	最小值	number / string	1
max	最大值	number / string	99999
step	步长	number / string	1
disabled	是否禁用	boolean	false
minusIcon	减少按钮图标	string	subtract-fill
plusIcon	增加按钮图标	string	add-large-line
iconSize	图标大小	number / string	24
iconColor	图标颜色	string	#333333
disabledColor	禁用状态图标颜色	string	#c8c9cc
async	是否异步变更	boolean	false

Events 事件

事件名	说明	回调参数
input	输入框值改变时触发	value: number
change	值改变时触发	{ value: number, type: string }

change 事件参数

参数	说明	可选值
value	当前值	-
type	触发类型	minus / plus / input