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>

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

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

您可能感兴趣的文章:

  • vue实现Input输入框模糊查询方法
  • vue input输入框模糊查询的示例代码
  • vue element-ui实现input输入框金额数字添加千分位
  • vue实现验证码输入框组件
  • vue.js 实现输入框动态添加功能
  • vue中使用iview自定义验证关键词输入框问题及解决方法
  • Vue 实现输入框新增搜索历史记录功能
  • vue表单验证之禁止input输入框输入空格
  • VUE.js实现动态设置输入框disabled属性
  • vue 简单自动补全的输入框的示例
张贴在2