09-Vue基础-Vue实战之数值输入控件

组件实战

1. 数字输入框组件

定义目录：

index.html 入口页
input-number.js 数字输入框组件
index.js 根实例

功能分析：

数字输入框只能输入数字，而且有两个快捷键，可以直接加一减一
可以设置初始值、最大值、最小值
在数值改变时，触发一个自定义事件来通知父组件

代码详情：

<!-- 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://cdn.jsdelivr.net/npm/vue/dist/vue.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 class="input-number">
            <input type="text" :value="currentValue" @change="handleChange">
            <!-- disabled 禁用input属性 -->
            <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.currentValue <= this.min) return;
            this.currentValue -= 1;
        },
        handleUp: function() {
            if (this.currentValue >= 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);
    }
});

posted on 2020-01-23 12:17 cculin 阅读(560) 评论(0) 收藏举报