输入框只能输入数字,并且有两个快捷按钮,可以直接加1或减1。除此之外,还可以额设置初始值、最大值、最小值、步长,在数值改变时,触发一个自定义事件来通知父组件。
在父组件中使用
<template>
<div>
<number-box v-model="value" :max="50" :min="0" :step="2"></number-box>
</div>
</template>
<script>
import NumberBox from './subComponents/NumberBox'
export default {
data(){
return {
value: 5,
}
},
components:{
NumberBox
}
}
</script>
<style scoped>
</style>
组件 NumberBox.vue源码
<template>
<div class="input-number">
<button @click="handleDown" :disabled="currentValue <= min" >-</button>
<input type="text" :value="currentValue" @change="handleChange" @keyup.up='handleUp' @keyup.down='handleDown'>
<button @click="handleUp" :disabled="currentValue >= max">+</button>
</div>
</template>
<script>
export default {
data(){
return{
currentValue: this.value
}
},
props:{
max: {type: Number, default: Infinity},
min: {type: Number, default: -Infinity},
value: {type: Number, default: 0},
step: {type: Number, default:1},
},
methods:{
handleDown(){
if(this.currentValue <= this.min) return;
this.currentValue -= this.step;
},
handleUp(){
if(this.currentValue >= this.max) return;
this.currentValue += this.step;
},
handleChange(){
let val = event.target.value.trim();
let max = this.max;
let min = this.min;
if(this.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;
}
},
updateValue(val){
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
isValueNumber(value){
return (/(^-?[0-9]+\.{1}\d+$) | (^-?[1-9][0-9]*$) | (^-?0{1}$)/).test(value + '');
}
},
mounted(){
this.updateValue(this.value);
},
watch:{
currentValue(val){
this.$emit('input', val);
this.$emit('on-change', val);
},
value(val){
this.updateValue(val);
}
}
}
</script>
<style scoped>
</style>