Vue.js--数字输入框组件

Myth丶恋晨 2021-08-13 23:21 470阅读 0赞

#### 效果 ####

![在这里插入图片描述][20191017181621223.png]

#### 入口页 index.html ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数字输入框组件</title>
    </head>
    <body>
        <div id="app">
            <input-number v-model="value" :max="10" :min="0"></input-number>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="input-number.js"></script>
        <script src="index.js"></script>
    </body>
    </html>

#### 数字输入框组件 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: { 
            updateValue: function (val) { 
                if(val > this.max)
                    val = this.max;
                if(val < this.min)
                    val = this.min;
                this.currentValue = val;
            },
            handleDown: function () { 
                if(this.currentVaule <= this.min)
                    return;
                this.currentValue -= 1;
            },
            handleUp: function () { 
                if(this.currentVaule >= this.max)
                    return;
                this.currentValue += 1;
            },
            handleChange: function (event) { 
                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;
                }
            }
        },
        mounted: function () { 
            this.updateValue(this.value);
        }
    });

#### 根实例 ####

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

[20191017181621223.png]: /images/20210813/8bb782ef5cf44947ad37902f825be742.png

发表评论取消回复

表情：

评论列表（有 0 条评论，470人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element UI 禁用数字输入框组件添加鼠标滚动事件

Element UI 禁用数字输入框组件添加鼠标滚动事件 <el-input type="number" @mousewheel.n

妖狐艹你老母/ 2024年02月18日 12:48/ 0 赞/ 66 阅读

相关 JS 输入框只能输入数字

说明：οnkeyup=按键抬起触发， onafterpaste=粘贴之后触发 onkeypress =按下并放开任何字母数字键时触发 onbeforepaste=粘贴

男娘i/ 2024年02月17日 18:04/ 0 赞/ 96 阅读

相关 flutter 输入框限制输入数字、小数

更多Widget 的应用，小编已总结在书中 [手机点击查看][Link 1] [电脑点击查看][Link 2] ![请添加图片描述][watermar

喜欢ヅ旅行/ 2023年10月07日 17:09/ 0 赞/ 66 阅读

相关 input输入框输入数值检测只能输入数字，非数字离开输入框后会清除

input输入框输入数值检测只能输入数字，非数字离开输入框后会清除 // blur 事件 Blur(nums) { thi

爱被打了一巴掌/ 2022年09月10日 10:10/ 0 赞/ 309 阅读

相关 html input输入框只能输入数字只能输入字母数字组合

1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')"

我不是女神ヾ/ 2022年06月01日 07:09/ 0 赞/ 376 阅读

相关控制input框输入数字

1.只能输入正整数 <input type="text" οnkeyup="if(this.value.length==1){this.value=this.val

男娘i/ 2022年05月25日 07:21/ 0 赞/ 355 阅读

相关 input输入框只能输入数字，只能输入字母数字组合

输入大小写字母、数字、下划线： <input type="text" onkeyup="this.value=this.value.replace(/[^\w_

你的名字/ 2022年05月19日 12:00/ 0 赞/ 361 阅读

相关 Vue.js实现数字输入框组件

![70][] index.html <!DOCTYPE html> <html> <head> <meta charse

迷南。/ 2022年05月12日 02:30/ 0 赞/ 239 阅读

相关 input输入框只能输入数字

<input type="number" class="input-control input-l" id="oldcard" oninput = "value=val

骑猪看日落/ 2022年02月01日 13:09/ 0 赞/ 454 阅读

相关 Vue.js--数字输入框组件

效果 ![在这里插入图片描述][20191017181621223.png] 入口页 index.html <!DOCTYPE html> <ht

Myth丶恋晨/ 2021年08月13日 23:21/ 0 赞/ 471 阅读