<!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>数字输入框</title>
</head>
<body>
<div id="app">
<input-number v-model="value" :max="10" :mix="0"></input-number>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script >
function isValueNumber(value){
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+'');
}
Vue.component('input-number',{
template:'\
<div class="input-number">\
<input type="text" @change="handChange" :value="currentValue">\
<button @click="handDown" :disabled="currentValue <= min">-</button>\
<button @click="handUp" :disabled="currentValue >= max">+</button>\
</div>',
props:{
max:{
type:Number,
default:Infinity
},
min:{
type:Number,
default:-Infinity
},
value:{
type:Number,
default:0
}
},
data:function(){
return {
currentValue: this.value
}
},
//watch用来监听prop或data的改变,触发watch配置的函数
watch:{
currentValue:function(val){
//使用v-model时改变value
this.$emit('input',val);
//触发自定义事件on-change,告知父组件数字值有改变(本例中没有使用该事件)
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;
},
handDown(){
if(this.currentValue <= this.min) return ;
this.currentValue -= 1;
},
handUp(){
if(this.currentValue >= this.max) return ;
this.currentValue += 1;
},
handChange(ev){
var val = ev.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 {
ev.target.value = this.currentValue;
}
}
},
//初始化时对value进行过滤
mounted () {
this.upDateValue(this.value);
}
})
var app = new Vue({
el:"#app",
data:{
value:5
}
})
</script>
</body>
</html>
vue 练习(prop、emit、watch)-数字输入框
最新推荐文章于 2024-07-29 14:33:52 发布