如何在Vue中使用数字输入框组件

tangjin
tangjin
作者

如何在Vue中使用数字输入框组件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

基础需求

如何在Vue中使用数字输入框组件

  • 只能输入数字

  • 设置初始值，最大值，最小值

  • 在输入框聚焦时，增加对键盘上下键的支持

  • 增加一个控制步伐prop-step,例如，设置为10 ，点击加号按钮，一次增加10

项目搭建

在了解需求后，进行项目的初始化：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<input-number></input-number>
</div>
</body>
</html>
<script>
Vue.component('input-number',{
template:`
<divclass="input-number">
<inputtype="text"/>
<button>-</button>
<button>+</button>
</div>
`}
varapp=newVue({
el:'#app'
})
</script>

初始化结构搭好后，由于要设置初始值，最大值、最小值，我们在父组件中的 < input-number>< /input-number>上设置这些值，并且通过Props将父组件数据传递给子组件

父组件中添加数据：value是一个关键的绑定值，所以用v-model，实现双向绑定。

<input-numberv-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

<inputtype="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:`
<divclass="input-number">
<inputtype="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事件，并且判断输入的是否数字：

<inputtype="text":value="currentValue"@change="handleChange"/>

在methods选项中，添加handleChange方法：

//输入框输入值
handleChange(event){
varval=event.target.value.trim();
varmax=this.max;
varmin=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：

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

到此一个数字输入框组件基本完成，但是前面提出的后两个要求也需要实现，很简单，在input上绑定一个keydown事件，在data选项中添加数据prop_step

<inputtype="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--;
}
}

完整代码：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<input-numberv-model="value":max="100":min="0"></input-number>
</div>
</body>
</html>
<script>
functionisValueNumber(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:`
<divclass="input-number">
<inputtype="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){
varval=event.target.value.trim();
varmax=this.max;
varmin=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);
}


})
varapp=newVue({
el:'#app',
data:{
value:5
}
})
</script>

关于如何在Vue中使用数字输入框组件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。

阅读全文
发布于 2021-03-21 22:40:34
vue
收藏
分享
海报
0 条评论
160
上一篇：如何在tensorflow中使用tf.concat()函数 下一篇：怎么在Python中自动生成Word文档
目录

    推荐阅读

    0 条评论

    本站已关闭游客评论，请登录或者注册后再评论吧~

    忘记密码？

    图形验证码