SOURCE

/**
 * Created by lenovo on 2020/1/3.
 */


Vue.component("input-number", {
    template: "<div class='input-number'>  <input type='text' :value='value' @change='handleChange'></div>",
    props: {
        max:0,
        min: 0,
        value:0
    },
    methods: {

        handleChange: function (event) {
            // 在输入框内容变化的时候不会触发change，当鼠标在其他地方点一下才会触发；
            console.log('input 的change事件')
            var max = this.max;
            var min = this.min;
            var val = event.target.value.trim()
            console.log("获取到的数据val：" + val)
            if (isRealNum(val)) {
                console.log("获取到的input输入是一个number")
                val = Number(val)
                newValue = val;

                if (val > max) {
                    console.log("输入的数值为：" + val + "  大于最大值max:" + max)
                    newValue = max;
                } else if (val < min) {
                    console.log("输入的数值为：" + val + " 小于最小值min:" + min)
                    newValue = min
                }
                this.$emit('input', newValue)
                console.log(this)
                console.log(event.target.value)
            } else {
                console.log("获取到的input输入不是一个number")
                event.target.value = this.value;
            }


        }

    }


})

/**
 * 校验只要是数字（包含正负整数，0以及正负浮点数）就返回true
 **/

function isRealNum(val) {
    // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除，
    if (val === "" || val == null) {
        return false;
    }
    if (!isNaN(val)) {
        //对于空数组和只有一个数值成员的数组或全是数字组成的字符串，isNaN返回false，例如：‘123‘、[]、[2]、[‘123‘],isNaN返回false,
        //所以如果不需要val包含这些特殊情况，则这个判断改写为if(!isNaN(val) && typeof val === ‘number‘ )
        return true;
    }
    else {
        return false;
    }
}


var app = new Vue({
    el: "#app",
    data: {
        appValue: 50
    }

})

<div id="app">
    <input-number v-model="appValue" :max="10" :min="0"></input-number>



</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>