如何在el-input中设置只能输入数字且限制小数点位数？

Question

如何在el-input中设置只能输入数字且限制小数点位数？这是常见问题。例如，需要用户输入金额时，不仅要限制为数字，还要控制小数点后只能保留两位，该如何实现呢？

Answer 1

1. 问题概述

在前端开发中，尤其是使用Element UI框架时，el-input组件的输入限制是一个常见的需求。例如，在处理金额输入时，我们需要确保用户只能输入数字，并且小数点后最多保留两位。这一需求可以通过正则表达式、事件监听以及数据绑定等方式实现。

以下将从基础到高级逐步解析如何在el-input中设置仅允许输入数字并限制小数点位数的问题。

2. 基础解决方案：通过正则表达式过滤输入

最直接的方法是利用Vue的v-model双向绑定和watch监听器，结合正则表达式对输入值进行格式化。

• 首先，定义一个正则表达式来匹配符合要求的数字格式，例如：/^\d*\.?\d{0,2}$/。
• 然后，在watch中实时验证输入内容，并修正不符合规则的部分。

<template>
    <el-input v-model="amount" @input="handleInput"></el-input>
</template>

<script>
export default {
    data() {
        return {
            amount: ''
        };
    },
    methods: {
        handleInput(value) {
            this.amount = value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
            if (this.amount.split('.')[1] && this.amount.split('.')[1].length > 2) {
                this.amount = this.amount.split('.')[0] + '.' + this.amount.split('.')[1].slice(0, 2);
            }
        }
    }
};
</script>
    

3. 高级优化：自定义指令与用户体验提升

为了提高代码复用性和用户体验，可以创建一个自定义指令来封装输入限制逻辑。

步骤	描述
1	定义一个名为v-number的自定义指令。
2	在指令中添加更新函数，用于实时拦截非法输入。

Vue.directive('number', {
    update(el, binding) {
        el.value = el.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        if (el.value.split('.')[1] && el.value.split('.')[1].length > 2) {
            el.value = el.value.split('.')[0] + '.' + el.value.split('.')[1].slice(0, 2);
        }
    }
});
    

4. 流程图：实现逻辑概览

以下是整个实现流程的简化版流程图，帮助理解关键步骤：

graph TD;
            A[用户输入] --> B{是否合法？};
            B -- 是 --> C[保持原值];
            B -- 否 --> D[修正为合法值];
            D --> E[更新视图];