vue自定义数字输入框组件

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

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

组件代码如下：

<template>
    <div style="text-align: center;margin-top: 20px;">
        <input type="text" v-model="currentValue" @change="handleChange">
        <button @click="handleUp" :disabled="currentValue >= max">+</button>
        <button @click="handleDown" :disabled="currentValue <= min">-</button>
    </div>
</template>
 
<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>
 
<style scoped>
    input{
        width: 280px;
        height: 36px;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    button{
        border: none;
        background: #4e83e4;
        color: #fff;
        height: 36px;
        width: 36px;
    }
</style>

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

<template>
    <div>
        <h2>数字输入框组件</h2>
        <!--  max是可输入的最大值  min是可输入的最小值  value是初始值-->
        <my-input v-model="value" :max="10" :min="-5"></my-input>
        <p style="text-align: center;"><button @click="doAlert(value)">输入框的值是</button></p>
    </div>
</template>
 
<script>
    import MyInput from '../components/MyInput.vue';
    export default {
        name: "computeNumber",
        components:{MyInput},
        data(){
            return {
                value: 1
            }
        },
        methods:{
            doAlert: function (val) {
                alert(val);
            }
        }
    }
</script>

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

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