这个博客详细介绍了如何使用Vue.js创建一个带有增减功能的数值输入框组件。该组件接受最大值、最小值、初始值和步长等属性，并在用户输入超出范围时进行校正。同时，它监听并响应输入值的变化，通过`$emit`传递更新的值给父组件。此外，还实现了键盘上下键的加减功能，确保输入的数值始终在设定范围内。
Vue.component('number-input',{//定义来自父级的参数
props:{
max:{
type:Number,default:Infinity
},
min:{
type:Number,default:-Infinity
},
value:{
type:Number,default:0},
step:{
type:Number,default:1}
},
template:'\
\
ADD \
Reduce \
data:function(){//Vue组件是单向数据流，无法直接修改prop中的值
var currentValue = 0;if(this.value > this.max){
currentValue= this.max ;
}else if(this.value < this.min){
currentValue= this.min ;
}else{
currentValue= this.value ;
}return{
currentValue :currentValue
}
},
methods:{
handleChange:function(event){var val =event.target.value.trim() ;if(isValueNumber(val)){var max = this.max ;var min = this.min ;
val=Number(val);this.currentValue =val ;if(val>max) this.currentValue =max ;if(val
}else{//如果输入的非数字，则保留之前的数据
event.target.value = this.currentValue ;
}
},//绑定键盘事件
handleKeydown:function(event){if(event.keyCode==38){this.handleAdd();
}if(event.keyCode==40){this.handleReduce() ;
}
},
handleAdd:function(){if(this.currentValue>=this.max) return;this.currentValue += this.step ;
},handleReduce:function(){if(this.currentValue<=this.min) return;this.currentValue -= this.step;
},
updateVal:function(val){if(val>this.max) val = this.max ;if(val
}
},
watch:{//增加监听
currentValue:function(val){this.$emit('input',val);this.$emit('on-change',val);
},
value:function(val){this.updateVal(val);
}
}
})
扫一扫
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
