《Vue.js实战》数字输入框组件案例（包含练习1和练习2）

最新推荐文章于 2024-03-09 16:19:59 发布

原创最新推荐文章于 2024-03-09 16:19:59 发布 · 1.8k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Vue #数字输入框组件

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用Vue.js开发一个数字输入框组件，组件支持输入数字、上下键加减操作以及加10减10的功能。详细讲解了练习1和练习2的实现思路，包括键盘事件监听、prop传递步长值以及确保数值在0到100的范围内。

题目来源：《Vue.js实战》第七章 7.7.1 实战：开发一个数字输入框组件

展示效果链接：https://loaln.github.io/vue_practice/html/7-7-1.html

需求：

数字输入框只能输入数字，而且有两个快捷键按钮，可以直接减1或加1。除此之外，还可以设置初始值、最大值，在数值改变时，触发一个自定义事件来通知父组件。

操作提示：

1、数值最小为0，最大为100；
2、输入框聚焦时，按键盘上下键可对数值进行+1和-1的操作；
3、额外设置的两个按钮可进行+10和-10的操作。

练习1：

在输入框聚焦时，增加对键盘上下键的支持，相当于加1和减1。

思路：

这里倒是很简单，直接在组件模板的input元素中绑定两个键盘事件连接 handleDown 和 handleUp 函数即可。
即：@keyup.down="handleDown(1)" @keyup.up="handleUp(1)"
这里传递参数是因为我的代码是把练习1跟2写在一起，这是为了分增加10步。

练习2：

增加一个控制步伐的prop——step，比如设置为10，点击加号按钮，一次增加10.

思路：

首先，题目说是要增加prop——step，所以我在父组件中绑定:step="10"，给子组件传递数据；
将step写在子组件props中，并在data中增加currentStep，为其赋予父组件step值，这是为了能在子组件模板中方便调用；
增设两个按钮操作+-10，绑定 handleDown 和 handleUp 函数
修改 handleDown 和 handleUp 函数：为了区分练习1和2，我为其增加参数传递，并稍微修改其内容，保证各种操作后，数据不会小于0或大于100。

我是将练习1和练习2的代码整合到一起的。

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数字输入框组件</title>
	</head>
	<!--入口页-->
	<body>	
		<div id="app">
			<!--引入子组件-->
			<input-number v-model="value" :max="100" :min="0" :step="10"></input-number>
		</div>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/7-7-1-input-number.js" ></script>
		<script type="text/javascript" src="../js/7-7-1-index.js" ></script>
	</body>
</html>

JavaScript——7-7-1-index.js：

var app=new Vue({
	el:'#app',
	data:{
		value:5
	}
});

JavaScript——7-7-1-input-number.js：

function isValueNumber(value) {
	return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
}

/*此处的默认值Infinity是无限大和无限小*/
Vue.component('input-number', {
	template: '\
		<div class="input-number">\
			<input \
				type="text" \
				:value="currentValue" \
				@keyup.down="handleDown(1)" \
				@keyup.up="handleUp(1)" \
				@change="handleChange"> \
			<button \
				@click="handleDown(1)" \
				:disable="currentValue<=min">-</button> \
			<button \
				@click="handleUp(1)" \
				:disable="currentValue>=max">+</button> \
			<button \
				@click="handleDown(currentStep)" \
				:disable="currentValue<=min">-10</button> \
			<button \
				@click="handleUp(currentStep)" \
				:disable="currentValue>=max">+10</button> \
		</div>',
	props: {
		max: {
			type: Number,
			default: Infinity
		},
		min: {
			type: Number,
			default: -Infinity
		},
		value: {
			type: Number,
			default: 0
		},
		step: {
			type: Number,
			default: 1
		}
	},
	data: function() {
		return {
			currentValue: this.value,
			currentStep: this.step
		}
	},
	watch: {
		currentVaule: function(val) {
			this.$emit('input', val);
			this.$emit('on-change', val);
		},
		value: function(val) {
			this.updateValue(val);
		}
	},
	methods: {
		handleDown: function(step) {
			if(this.currentValue - step <= this.min) {
				this.currentValue = this.min;
				return;
			}
			this.currentValue -= step;
		},
		handleUp: function(step) {
			if(this.currentValue + step >= this.max) {
				this.currentValue = this.max;
				return;
			}
			this.currentValue += step;
		},
		updateValue: function(val) {
			if(val > this.max) val = this.max;
			if(val < this.min) val = this.min;
			this.currentValue = val;
		},
		handleChange: function(event) {
			var val = event.target.value.trim();
			var max = this.max;
			var min = this.min;
			if(isValueNumber(val)) {
				val = Number(val);
				this.currentValue = val;
				if(val > max) {
					this.currentValue = max;
				} else if(val < min) {
					this.currentValue = min;
				}
			} else {
				event.target.value = this.currentValue;
			}
		}
	},
	mounted: function() {
		this.updateValue(this.value);
	}
});