美文网首页
Vue 基础练习 demo: 一个 input-number 组

Vue 基础练习 demo: 一个 input-number 组

作者: devZhang | 来源:发表于2019-06-14 13:49 被阅读0次

    最近在学习 Vue,看完官方文档基础部分做了一个小 demo, 提供一个输入框和可供加减操作的按钮, 旨在联系 Vue 的相关基础知识. 本文主要以代码为主

    创建相关文件

    一个 index.html 文件, 一个 index.js 文件, 还有一个输入框组件文件: input-number.js 文件

    编辑 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"
                    @keyup.down="handleDown"
                    @keyup.up="handleUp"
                    :value="currentValue"
                    @change="handleChange">
                <button
                    @click="handleDown"
                    :disabled="currentValue <= min">-</button>
                <button
                    @click.down="handleUp"
                    :disabled="currentValue >= max">+</button>
            </div>`,
            // 组件 props
            props: {
                max: {  // 最大值
                    type: Number,
                    default: Infinity
                },
                min: {  // 最小值
                    type: Number,
                    default: -Infinity
                },
                value: {    // 当前值
                    type: Number,
                    default: 0
                }
            },
            data() {
                return {
                    currentValue: this.value
                }
            },
            // 观察探测当前值是否变化
            watch: {
                currentValue(val) {
                    this.$emit('input', val);
                    this.$emit('on-change', val);
                },
                value(val) {
                    this.updateValue(val);
                }
            },
            methods: {
                // 更新当前值
                updateValue(val) {
                    if (val > this.max) val = this.max;
                    if (val < this.min) val = this.min;
                    this.currentValue = val;
                },
                // 按下减号或者方向键下的事件
                handleDown() {
                    if (this.currentValue <= this.min) return;
                    this.currentValue -= 1;
                },
                // 按下加号或者方向键上的事件
                handleUp() {
                    if (this.currentValue >= this.max) return;
                    this.currentValue += 1;
                },
                // 监听input变化事件
                handleChange(event) {
                    let val = event.target.value.trim();
                    let max = this.max;
                    let 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 () {
                // 更新当前值
                this.updateValue(this.value);
            }
    });
    

    使用组件

    在页面引用组件, 并设置最大值和最小值

    <!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>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- 引用组件 -->
            <input-number v-model="value" :max="10" :min="0"></input-numbe>
        </div>
    
        <script src="https://cdn.staticfile.org/vue/2.6.2/vue.js"></script>
        <script src="./input-number.js"></script>
        <script src="./index.js"></script>
    
    </body>
    </html>
    

    创建 Vue 实例

    在 index.js 里创建Vue 实例并设置初始值

    
    // 创建 Vue 实例
    let app = new Vue({
        el: '#app',
        data: {
            value: 0    // 最初的默认值
        }
    });
    
    

    实现效果

    如下所示, 可以点击加减号进行数值的增减, 也可以在 input 聚焦的时候使用键盘上下方向键进行同样操作, 超过最大值或者小于最小值的时候不变化

    image

    相关文章

      网友评论

          本文标题:Vue 基础练习 demo: 一个 input-number 组

          本文链接:https://www.haomeiwen.com/subject/flnufctx.html