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

迷南。 2022-05-12 02:30 200阅读 0赞

![70][]

index.html

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <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.min.js"></script>
        <script src="input-number.js"></script>
        <script src="index.js"></script>
    </body>
    
    </html>

index.js

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

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>\
            <input type="text" :value="currentValue" @change="handleChange" @keydown="handleKeydown" />\
            <button @click="handleReduce" :disabled="currentValue <= min">-</button>\
            <button @click="handleAdd" :disabled="currentValue >= max">+</button>\
        </div>',
        props: {
            max: {
                type: Number,
                default: Infinity
            },
            min: {
                type: Number,
                default: -Infinity
            },
            value: {
                type: Number,
                default: 0
            },
            step: {
                type: Number,
                default: 1
            }
        },
        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: {
            handleChange: function (event) {
                var val = event.target.value.trim();
                if (isValueNumber(val)) {
                    var max = this.max;
                    var min = this.min;
                    val = Number(val);
                    this.currentValue = val;
                    if (val > max) this.currentValue = max;
                    if (val < min) this.currentValue = min;
                } else {
                    event.target.value = this.currentValue;
                }
            },
            handleKeydown: function (event) {
                if (event.keyCode == 38) {
                    this.handleAdd();
                }
                if (event.keyCode == 40) {
                    this.handleReduce();
                }
            },
            handleAdd: function () {
                if (this.currentValue >= this.max) return;
                this.currentValue += this.step;
            },
            handleReduce: function () {
                if (this.currentValue <= this.min) return;
                this.currentValue -= this.step;
            },
            updateValue: function (val) {
                if (val > this.max) val = this.max;
                if (val < this.min) val = this.min;
                this.currentValue = val;
            }
        },
        mounted: function () {
            this.updateValue(this.value);
        },
    });

[70]: /images/20220512/0eb89be3e8094dc399914640e5cfa23d.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

相关 react实现一个数字框，文本框内只能输入数字

完整代码 import React from 'react'; import ReactDOM from 'react-dom'; import 'a

叁歲伎倆/ 2023年01月03日 14:07/ 0 赞/ 568 阅读

相关 element-ui实现input输入框金额数字添加千分位组件

创建一个amountFormat.js const MoneyTest = /((^[1-9]\d)|^0)(\.\d{0,2}){0,1}$/;

逃离我推掉我的手/ 2022年10月23日 11:25/ 0 赞/ 521 阅读

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

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

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

相关控制input框输入数字

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

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

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

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

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

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

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

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

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

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

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

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

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

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