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

最新推荐文章于 2024-02-07 18:10:38 发布

吴声子夜歌

最新推荐文章于 2024-02-07 18:10:38 发布

阅读量710

点赞数 2

分类专栏： Vue.js 文章标签： Vue.js 数字输入框组件

本文链接：https://blog.csdn.net/cold___play/article/details/102612341

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

效果

在这里插入图片描述

入口页 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
    }
});

吴声子夜歌

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js--数字输入框组件

效果入口页 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫