Vue.js输入框组件开发

HTML

JS

input-number.js

Vue.component("input-number", {
    template: `
    

        

            

                
                
                -
                +
            
        
    
    `,
    props: {
        max: {
            type: Number,
            default:Infinity
        },
        min:{
            type:Number,
            default:-Infinity
        },
        stepMax: {
            type: Number,
            default:Infinity
        },
        stepMin:{
            type:Number,
            default:1
        },
        value:{
            type:Number,
            default:0
        },
        step:{
            type:Number,
            default:1
        }
    },
    data (){
        return {
            currentValue: this.value,
            currentStep: this.step,
        }
    },
    watch:{
        currentValue(val){
            this.updateValue(val);
            this.$emit("input",val);
            this.$emit("on-change",val)
        },
        currentStep(val){
            this.$emit("input",val);
        }
    },
    methods:{
        crease: function(){
            if(this.currentValue>=this.max) return;
            var step = this.currentStep;
            this.currentValue+=step;
        },
        reduce:function(){
            if(this.currentValue<=this.min) return;
            var step = this.currentStep;
            this.currentValue-=step;
        },
        handlerChange:function(event){
            var val = event.target.value.trim();
            if(val){
                val = Number(val);
                this.currentValue = val;
                this.updateValue(val);
            }else{
                event.target.value = this.currentValue;
            }
        },
        updateValue:function(val){
            console.log(typeof(val));
            if(val>this.max) val = this.max;
            if(valthis.stepMax) val = this.stepMax;
            if(val

index.js

var vm = new Vue({
    el: "#app",
    data: {
        value: 20,
        step: 1
    },
    methods: {
        updateValue: function(val) {
            this.value = val;
        }
    }
})