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>