el-input只能输入大于0的整数

vue中解决el-input只能输入大于0的整数

基本思路为：将input输入的字符值分割成数组，然后遍历数组，同时进行正则校验及特殊情况处理。欢迎指正

limit-fuction.js文件

 
export default {
   /**
     * 只能输入大于0的正整数（不能以0开头）
     * @param {string} value
     * @returns {string | number} 返回空字符或数字
     */
    integerFn(value) {
        let reg = /[1-9]{1}[0-9]*$/;
        let strArray = value.split("");
        let newStrs = "";
        for (let i = 0; i < strArray.length; i++) {
            if (reg.test(strArray[i])) {
                newStrs += strArray[i];
            } else if (i > 0 && strArray[i] === "0") {
                newStrs += strArray[i];
            }
        }
        if (newStrs - 0 > 0) {
            return newStrs - 0;
        } else {
            return "";
        }
    }
};

main.js文件

// 将限制函数文件绑定到vue原型上，供全局使用
import limit from "./utils/limit-fuction";
Vue.prototype.$limit = limit;

vue组件中使用：

 <el-input v-model="signValue" @input="(e) => (signValue = $limit.integerFn(e))"></el-input>