Vue(八) 数字输入框组件案例

最新推荐文章于 2023-07-25 17:19:48 发布

weixin_30340617

最新推荐文章于 2023-07-25 17:19:48 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kindleheart/p/10006179.html

本文详细介绍了一个基于Vue的数字输入框组件的实现过程。该组件拓展了普通输入框的功能，能够快速输入标准数字，并通过按钮进行数值增减，同时设置了最大最小值限制。文章提供了完整的代码示例，包括组件的模板、属性、数据监听和方法。

数字输入框是对普通输入框的扩展，用来快捷输入一个标准的数字，如图：

代码：

 <div id="app">
        <input-number v-model="value" :max="100" :min="0"></input-number>
    </div>
    <script>
        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"\
                        @keyup.up="handleUp"\
                        @keyup.down="handleDown">\
                    <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: {
                handleDown: function () {
                    if(this.currentValue <= this.min) return;
                    this.currentValue -= 1;
                },
                handleUp: function () {
                    if(this.currentValue >= this.max) return;
                    this.currentValue += 1;
                },
                updateValue: 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(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;
                    }
                }
            },
            mounte: function () {
                this.updateValue(this.value);
            },
        });

        var app = new Vue({
            el: '#app',
            data: {
                value: 5
            }
        })
    </script>

转载于:https://www.cnblogs.com/kindleheart/p/10006179.html