Vuejs|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=https://www.it610.com/article/title"End
【Vuejs|Vuejs Element input组件区分中英文 统计长度】最后再记录下vue里面的全局方法，再main.js中写下面的方法或者导入包含的js文件就可以了，在vue文件中可以直接
this.xxx()调用。Vue.prototype.xxx = function() {}
推荐阅读
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- element源码学习二（dev）
- element-ui表单验证例子（validateField验证部分表单）
- 移动端html5网站，如何设置输入框键盘的“搜索”“前往”按钮|移动端html5网站，如何设置输入框键盘的“搜索”“前往”按钮 - input type
- 兼容性处理
- 【最棒的讲解】细说element分页
- Spark--java.util.NoSuchElementException:|Spark--java.util.NoSuchElementException: None.get at at
- vuejs|vuejs 数据绑定原理
- vue-element-admin登录验证使用