Vue数字输入框组件使用方法详解
crazy的蓝色梦想 人气:0前面的话
关于基础组件介绍，已经更新完了。这篇文章将用组件基础知识开发一个数字输入框组件。将涉及到指令、事件、组件间通信。
基础需求
- 只能输入数字
- 设置初始值，最大值，最小值
- 在输入框聚焦时，增加对键盘上下键的支持
- 增加一个控制步伐prop-step,例如，设置为10 ，点击加号按钮，一次增加10
项目搭建
在了解需求后，进行项目的初始化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vuehttps://img.qb5200.com/download-x/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input-number></input-number>
</div>
</body>
</html>
<script>
Vue.component('input-number',{
template: `
<div class="input-number">
<input type="text" />
<button>-</button>
<button>+</button>
</div>
`}
var app = new Vue({
el:'#app'
})
</script>
初始化结构搭好后，由于要设置初始值，最大值、最小值，我们在父组件中的 < input-number>< /input-number>上设置这些值，并且通过Props将父组件数据传递给子组件
父组件中添加数据：value是一个关键的绑定值，所以用v-model，实现双向绑定。
<input-number v-model="value" :max="100" :min="0"></input-number>
在子组件中添加props选项：
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
我们知道，Vue组件时单项数据流，所以无法在子组件上更改父组件传递的数据，在这里子组件只改变value值，所以我们给子组件设置一个data数据，默认引用value值，然后在组件内部维护这个data。
data() {
return{
// 保存初次父组件传递的数据
currentValue : this.value,
}
}
并且给子组件的input元素绑定value
<input type="text" :value="currentValue" />
这样只解决了初始化时引用父组件value的问题，但是如果父组件修改了value，子组件无法感知，我们想要currentValue一起更新。那么就要使用wacth监听选项监听value。
- 当父组件value发生变化时，子组件currentValue也跟着变化。
- 当子组件currentValue变化时，使用$emit触发v-model，使得父组件value也跟着变化
watch: {
// 监听属性currentValue与value
currentValue(val) {
// currentValue变化时，通知父组件的value也变化
this.$emit('input', val);
},
value(val) {
// 父组件value改变时，子组件currentValue也改变
this.updataValue(val);
}
}，
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
}
},
// 第一次初始化时，也对value进行过滤
mounted: function() {
this.updataValue(this.value);
}
上述代码中，生命周期mounted钩子也使用了updateValue()方法，是因为初始化时也要对value进行验证。
父子间的通信解决差不多了，接下来完成按钮的操作：添加handleDown与handleUp方法
template: `
<div class="input-number">
<input type="text" :value="currentValue" />
<button @click="handleDown" :disabled="currentValue <= min">-</button>
<button @click="handleUp" :disabled="currentValue >= max">+</button>
</div>
`,
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
// 点击减号 减10
handleDown() {
if(this.currentValue < this.min) return
this.currentValue -= this.prop_step;
},
// 点击加号 加10
handleUp() {
if(this.currentValue < this.min) return
this.currentValue += this.prop_step;
},
当用户在输入框想输入具体的值时，怎么办？
为input绑定原生change事件，并且判断输入的是否数字：
<input type="text" :value="currentValue" @change="handleChange" />
在methods选项中，添加handleChange方法：
// 输入框输入值
handleChange(event) {
var val = event.target.value.trim();
var max = this.max;
var min = this.min;
if(isValueNumber(val)) {
val = Number(val);
if(val > max) {
this.currentValue = max;
}
if(val < min) {
this.currentValue = min;
}
this.currentValue = val;
console.log(this.value);
}else {
event.target.value = this.currentValue;
}
在外层添加判断是否为数字的方法isValueNumber：
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
}
到此一个数字输入框组件基本完成，但是前面提出的后两个要求也需要实现，很简单，在input上绑定一个keydown事件，在data选项中添加数据prop_step
<input type="text" :value="currentValue" @change="handleChange" @keydown="handleChange2" />
data() {
return{
// 保存初次父组件传递的数据
currentValue : this.value,
prop_step: 10
}
}
// 当聚焦时，按上下键改变
handleChange2(event) {
console.log(event.keyCode)
if(event.keyCode == '38') {
this.currentValue ++;
}
if(event.keyCode == '40') {
this.currentValue --;
}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vuehttps://img.qb5200.com/download-x/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input-number v-model="value" :max="100" :min="0"></input-number>
</div>
</body>
</html>
<script>
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
}
Vue.component('input-number',{
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
template: `
<div class="input-number">
<input type="text" :value="currentValue" @change="handleChange" @keydown="handleChange2" />
<button @click="handleDown" :disabled="currentValue <= min">-</button>
<button @click="handleUp" :disabled="currentValue >= max">+</button>
</div>
`,
data() {
return{
// 保存初次父组件传递的数据
currentValue : this.value,
prop_step: 10
}
},
watch: {
// 监听属性currentValue与value
currentValue(val) {
// currentValue变化时，通知父组件的value也变化
this.$emit('input', val);
},
value(val) {
// 父组件value改变时，子组件currentValue也改变
this.updataValue(val);
}
},
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
// 点击减号 减10
handleDown() {
if(this.currentValue < this.min) return
this.currentValue -= this.prop_step;
},
// 点击加号 加10
handleUp() {
if(this.currentValue < this.min) return
this.currentValue += this.prop_step;
},
// 输入框输入值
handleChange(event) {
var val = event.target.value.trim();
var max = this.max;
var min = this.min;
if(isValueNumber(val)) {
val = Number(val);
if(val > max) {
this.currentValue = max;
}
if(val < min) {
this.currentValue = min;
}
this.currentValue = val;
console.log(this.value);
}else {
event.target.value = this.currentValue;
}
},
// 当聚焦时，按上下键改变
handleChange2(event) {
console.log(event.keyCode)
if(event.keyCode == '38') {
this.currentValue ++;
}
if(event.keyCode == '40') {
this.currentValue --;
}
}
},
// 第一次初始化时，也对value进行过滤
mounted: function() {
this.updataValue(this.value);
}
})
var app = new Vue({
el:'#app',
data:{
value: 5
}
})
</script>
加载全部内容