vue自定义数字输入框组件代码实例讲解

最近自己在练习组件开发，做了一个简单的数字输入框加减的组件，效果图如下：

组件可以传入三个参数，value是初始化值，max是可输入的最大值，min是可输入最小值，当然参数可以按需求继续扩展的。

组件代码如下：

<script>
    export default {
        props:['max','min','value'],
        name: "MyInput",
        data(){
            return {
                currentValue:this.value
            }
        },
        watch:{
            currentValue: function (val) { //currentValue值变动就向父组件传值
                this.$emit('input',val);
                this.$emit('on-change',val);
            },
            value:function (val) { //对值进行验证
                this.updataValue(val);
            }
        },
        mounted(){
            this.updataValue(this.value);
        },
        methods:{
            handleDown: function () {  //加法
                if(this.currentValue <= this.min){
                    return;
                }else{
                    this.currentValue -= 1;
                }
            },
            handleUp: function () { //减法
                if(this.currentValue >= this.max){
                    return;
                }else{
                    this.currentValue += 1;
                }
            },
            updataValue: function (val) {
                if(val > this.max){val = this.max}
                if(val < this.min){val = this.min}
                this.currentValue = val;

            },
            handleChange: function (event) {  //对值进行验证
                var val = event.target.value.trim();
                var max = this.max;
                var min = this.min;
                if(this.isNumber(val)){
                    val = Number(val);
                    this.currentValue = val;
                    if(val > max){
                        this.currentValue = max;
                    }else if(val < min){
                        this.currentValue = min;
                    }
                }else{
                    this.currentValue = 0;
                }
            },
            isNumber: function (value) {
                return (/^\-?[0-9]+$/).test(value + '');
            }
        }
    }
</script>

调用组件就很简单了，如下：

<script>
    import MyInput from '../components/MyInput.vue';
    export default {
        name: "computeNumber",
        components:{MyInput},
        data(){
            return {
                value: 1
            }
        },
        methods:{
            doAlert: function (val) {
                alert(val);
            }
        }
    }
</script>

组件做的很简单，欢迎大家一起交流。