本文实例为大家分享了Vue.js数字输入框组件的具体实现代码，供大家参考，具体内容如下
创新互联公司专业为企业提供南谯网站建设、南谯做网站、南谯网站设计、南谯网站制作等企业网站建设、网页设计与制作、南谯企业网站模板建站服务，10多年南谯做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
效果
入口页 index.html
数字输入框组件
数字输入框组件 input-number.js
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$) | (^-?[1-9][0-9]*$) | (^-?0{1}$)/).test(value + '');
}
Vue.component('input-number',{
template: '\
\
\
\
\
',
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
data: function () {
return {
currentValue: this.value
}
},
watch: {
currentValue: function (val) {
this.$emit('input', val);
this.$emit('on-change',val);
},
value: function (val) {
this.updateValue(val);
}
},
methods: {
updateValue: function (val) {
if(val > this.max)
val = this.max;
if(val < this.min)
val = this.min;
this.currentValue = val;
},
handleDown: function () {
if(this.currentVaule <= this.min)
return;
this.currentValue -= 1;
},
handleUp: function () {
if(this.currentVaule >= this.max)
return;
this.currentValue += 1;
},
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);
}
});根实例
var app = new Vue({
el: '#app',
data: {
value: 5
}
});更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
