vue3中封装输入框只能输入正整数、整数、动态保留想要的小数位数的方法

1.新建

在src/utils文件夹下新建handelSaveDigit.js文件

2.封装代码

// 限制输入框输入小数的位数
// value:是输入的值
// obj:绑定的字段所在的对象
// attr:绑定的字段
// num:限制的位数

// 只能输入正数
export function handelSaveDigits(value, obj, attr, num) {
    const reg1 = /^\d+$/; // 只能是数字的正则
    const reg = new RegExp(`^\\d*\\.?\\d{0,${num}}$`); // 动态创建匹配未超过特定小数位数的正则表达式
    const regChineseEnglish = /[\u4e00-\u9fa5a-zA-Z]+/; // 匹配中英文的正则
    if (num === 0) {
        if (!reg1.test(value)) {
            obj[attr] = value.slice(0, -1);
        }
    } else if (!reg.test(value)) {
            obj[attr] = value.slice(0, -1);
        }
    if (regChineseEnglish.test(value)) {
        obj[attr] = "";
    }
}
// 能输入负数
export function handelSaveNegativeDigits(value, obj, attr, num) {
    const reg1 = /^-?\d*$/; // 只能是数字的正则
    const reg2 = new RegExp(`^-?\\d*\\.?\\d{0,${num}}$`); // 动态创建匹配未超过特定小数位数的正则表达式
    const reg3 = /[\u4e00-\u9fa5a-zA-Z]+/; // 匹配中英文的正则

    if (num === 0) {
        if (!reg1.test(value)) {
            obj[attr] = value.slice(0, -1);
        }
    } else if (!reg2.test(value)) {
        obj[attr] = value.slice(0, -1);
    }

    if (reg3.test(value)) {
        obj[attr] = "";
    }
}

3.引入使用

// 在想要做限制的vue组件中引入使用
<el-col :span="12">
    <el-form-item label="应付金额:" >
        <el-input v-model="processingProgressForm.payableAmount" placeholder="请输入"
            @input="e => handelSaveDigits(e, processingProgressForm, 'payableAmount', 2)" />
    </el-form-item>
</el-col>


import { handelSaveDigits } from "@/utils/handelSaveDigit"; // 限制小数位数

4.说明

@input="e => handelSaveDigits(e, processingProgressForm, 'payableAmount', 2)"

e：是输入的值

processingProgressForm:绑定的字段所在的对象

payableAmount:绑定的字段

2:限制的位数

以上4个参数为必传值