Vuejs Element input组件区分中英文 统计长度

偶尔用Vue写写CMS后台界面，记录一下遇到的不常见的问题。

需求

文本显示长度限制，中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算。即"hh哈哈h"在js中长为5，在这里的需求中长3.5。主要控制一下最终字符串的显示长度。

1.png

正则匹配长度

这个比较简单，可以搜到大把现成的正则表达式，这里比较好的是在Unicode表上面直接选对应区间:Unicode table

这里用正则匹配出中文字符长度，加上剩下的乘0.5。

let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g;
let mat = text.match(cnReg);
if (mat) {
    return mat.length + (text.length - mat.length) * 0.5;
}
return text.length * 0.5;

动态切长字符串

当输入框长度过长时要切掉后面的字符串，跟原生maxlength交互相似，要确定从后面切多少位还是要用到循环，不如从后面一位一位切，直到长度够小。

while (this.fixedStrLength(val) > len) {
    val = val.substr(0, val.length - 1);
}

input组件最大长度判断

项目用的Element-UI组件库，el-input用maxlength控制最大长度，这里不好控制maxlength。

最开始想法是@change动态修改值，发现只有失去焦点的时候内容才会更新，搜索得知确实如此，改用@input。

这时model绑定的值确实更新了，但是输入框里面的值并没有变化，很奇怪。

2.png

这时搜到这篇文章分析vuejs的input组件源码，发现@input里面应该包含一个$event对象，打印一下看看是什么，发现跟上图一毛一样，不科学啊只有一个字符串值？不用el-input改原生input标签。

3.png

果然是个对象，值在$event.target.value中，那element做了什么？找了下源码，把值传成一个const不可变变量，并用this.$emit('input', value);
把原来的$event覆盖掉了，所以拿不到对象，直接对值修改也不生效。

最后选择换成vue的input标签，加上class="el-input__inner" 看起来跟el-input一样，在@input中拿到$event就可以肆意妄为了@input="title=fixedOnInputChange($event.target.value, 20);$event.target.value=title"

End

最后再记录下vue里面的全局方法，再main.js中写下面的方法或者导入包含的js文件就可以了，在vue文件中可以直接 this.xxx()调用。

Vue.prototype.xxx = function() {

}