vue输入框组件开发过程详解

本文实例为大家分享了vue输入框组件开发过程的具体代码，供大家参考，具体内容如下

input-number.js

function isValueNumber(value) {
    return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + '');
}
Vue.component('input-number',{
    template: '\
    
\
        \
        -\
        +\
    
',
    data: function (){
        return {
            currentValue: this.value,
            currentStep: this.$parent.step
        }
    },
    watch: {
        currentValue: function (val){
            this.$emit('input',val);
            this.$emit('on-change',val);
        },
        value: function(val){
            this.updateValue(val);
        }
    },
    methods: {
        handleDown: function(){
            if(this.currentValue<=this.min) return;
            this.currentValue-=this.currentStep;
        },
        handleUp: function(){
            if(this.currentValue>=this.max) return;
            this.currentValue+=this.currentStep;
        },
        updateValue: function(val){
            if(val>this.max) val=this.max;
            if(val max) {
                    this.current = max;
                }
                if(val < min) {
                    this.current = min;
                }
            } else {
                //如果输入的不是数字，将输入的内容重置为之前的currentValue
                event.target.value = this.currentValue;
            }
            
        },
        keyControl: function(){
            var _this=this;
            $(window).keydown(function(e){
                if($('input')){
                    if(e.keyCode==38){
                        _this.handleUp();
                    }
                    else if(e.keyCode==40){
                        _this.handleDown();
                    }
                }
            });
        }
    },
    mounted: function(){
        this.updateValue(this.value);
    },
    props:{
        max:{
            type: Number,
            default: Infinity
        },
        min: {
            type: Number,
            default: -Infinity
        },
        value: {
            type:Number,
            default: 0
        },
        step: {
            type:Number,
            default: 1
        }
    }
})

index.js

var app=new Vue({
    el: "#app",
    data: {
        value: 5,
        step: 10
    }
})

index.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。