Vue.js学习笔记—input-number:实战：开发一个数字输入框组件-CSDN博客

本文链接：https://blog.csdn.net/qq_44093294/article/details/107332543

参考《Vue,js》实战（梁灏编著）

input-number:实战：开发一个数字输入框组件

git代码
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 基本需求
    数字输入框只能输入数字，而且有两个快捷按钮，可以直接减1和加1,。
    除此之外，设置初始值、最大值、最小值，在数值改变时，触发一个自定义事件来通知父组件。 -->
    <div id="app">
        <input-number v-model="value" :max="10" :min="0"></input-number>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="input-number.js"></script>
    <script src="index.js"></script>
</body>
</html>

index.js

var app = new Vue({
    el: '#app',
    data :{
        value: 5
    }
});

input-number.js

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"\
              :value="currentValue"\
              @change="handleChange">\
            <button \
              @click="handleDown"\
              :disabled="currentValue<=min">-</button>\
            <button \
              @click="handleUp"\
              :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:{
        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--;
        },
        handleUp:function(){
            if(this.currentValue>=this.max) return;
            this.currentValue++;
        },
        handleChange:function(){
            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;
            }
        },
        updateValue:function(val){
            if(val>this.max) val=this.max;
            if(val<this.min) val=this.min;
            this.currentValue=val;
        }
    },
    mounted:function () {
        this.updateValue(this.value);
    }
});