uni-app:实现数字文本框，以及左右加减按钮-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app:实现数字文本框，以及左右加减按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果

uni-app:实现数字文本框，以及左右加减按钮,uni-app,uni-app,css,javascript

代码

文章来源地址https://www.toymoban.com/news/detail-633576.html

<template>
	<view>
		<view class='line3'>
			<view class='line3_position'>
				<view class='left'>数量<text>*</text></view> 
				<view class="right">
						<view class="quantity_btn">
							<view class="minus_quantity" @click="decrease">-</view>
							<input class="input_quantity" type="number" v-model="quantity" @input="handleInput">
							<view class="add_quantity" @click="increase">+</view>
						</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				quantity: 1
			};
		},
		methods: {
			handleInput(event) {
				const value = parseInt(event.target.value);
				if (!isNaN(value) && value >= 1) {
					this.quantity = value;
				} else {
					this.quantity = 1;
				}
			},
			increase() {
				this.quantity++;
			},
			decrease() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			}
		}
	};
</script>
<style lang="scss">
	.quantity_btn {
		display: flex;
		width: 50%;

		.add_quantity {
			border: 1px solid #74bfe7;
			text-align: center;
			width: 25%;
		}

		.input_quantity {
			// border-bottom: 1px solid #74bfe7;
			text-align: center;
			width: 50%;
		}

		.minus_quantity {
			border: 1px solid #74bfe7;
			text-align: center;
			width: 25%;
		}

	}

	.line3 {
		padding: 20rpx;
		// border: 1px solid black;
		.line3_position{
			width: 100%;
			display: flex;
			.left {
				width: 30%;
				// border: 1px solid black;
			}
			.right {
				display:flex;
				justify-content:flex-end;
				width: 70%;
				// border: 1px solid black;
			}
		}
		// border:1px solid black;
		
	}
</style>

到了这里，关于uni-app:实现数字文本框，以及左右加减按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！