注册vue全局指令
对el-input输入框进行最大长度过滤（区分中英文）
过滤空格
注册全局指令
main.js
/**
* 输入框最长输入限制
* @param {*} e 文本内容
* @param {number} maxlength 最大字符长度
* @param {boolean} trim 是否过滤空格
* @returns {string} 最终文本
*/
const checkLength = (e, maxlength, trim) => {
let b = 0; // 输入的字符数
let r = String(e);//过滤掉所有空格
if (trim) {
r = String(e).replace(/\s+/g, "")
}
const reg = /^[\u0000-\u00ff]$/; //排除汉字和中文字符
const len = r.length
for (let i = 0; i < len; i++) {
let c = r.charAt(i);
if (reg.test(c)) {
b++;
} else {
b += 2;
}
if (b > maxlength) { // 字符长度限制
r = r.substr(0, i);
break;
}
}
return r
};
// 自定义指令-输入文本过滤
Vue.directive('limit-input', {
bind(el, bindings, vnode) {
const maxlength = typeof(bindings.value)=='object'
?bindings.value.maxlength
:bindings.value;
const trim = typeof(bindings.value)=='object'
?bindings.value.trim
:false;
el.addEventListener('input', (e) => {
e.target.value = checkLength(e.target.value, maxlength, trim);
});
}
});
使用
test.vue
<template>
<div>
<el-input
clearable
v-limit-input="{
maxlength: 100,
trim: true,
}"
></el-input>
<el-input
type="textarea"
v-limit-input="{
maxlength: 400,
trim: false,
}"
></el-input>
</div>
</template>
