Vue+＜el-input＞限制输入小数点后两位

前言

        Element UI组件绝大时候可以满足我们VUE项目实操中的需求，但总会有意想不到的功能需求需要我们去进行处理，所以记录<el-input>如何限制小数点后两位功能。

内容

       修饰符的作用

<el-input>输入是使用v-modal.number="value"一开始可以输入任何字符，只有刚开始输入数字才会做出限制。是因为.number修饰符将绑定值转化成number类型，并且只能是整数。

       功能展示

1. 保留小数点后两位
2. 只能有一个小数点
3. 只能是数字
4. 不是小数0不能开头
5. 小数点前自动补0

       通过代码示例完成功能

        页面引用组件<el-form>和<el-input>。

<el-form ref="form" :model="form">
    <el-form-item label="价格" prop="money">
        <el-input v-model="form.money" placeholder="请输入价格" @input="limitInput($event, 'money')" />
        </el-form-item>
</el-form>

        绑定组件form值。

data() {
        return{
            form:{
                money:"", //价格
            }
        }
    }

        通过绑定@input给<el-input>绑定事件(详情见element官网查看el-input使用)，通过实时获取输入值进行添加正则判断来实现限制小数点后两位的功能。

methods: {
    //限制只能输入两位小数
    limitInput(value, name) {
      this.form[name] = ('' + value) // 第一步：转成字符串
        .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
}

总结

        这样就完成了上述功能需求，编写不易，还望大家支持！需要注意的如下声明：

参数value表示输入的值，name表示匹配的对象属性；

this.form[name]表示绑定的表单form及input框绑定的属性值。

整体代码如下：

<template>
    <div>
        <el-form ref="form" :model="form">
            <el-form-item label="价格" prop="money">
              <el-input v-model="form.money" placeholder="请输入价格"
                @input="limitInput($event, 'money')" />
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        data() {
            return{
                form:{
                    money:"", //价格
                }
            }
        },
        methods:{
            //限制只能输入两位小数
            limitInput(value, name) {
                this.form[name] = ('' + value) // 第一步：转成字符串
                .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
                .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
                .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
                .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
            },
        }
    }
</script>