锐客网

  1. 首页 > it技术 > >

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

偶尔用Vue写写CMS后台界面，记录一下遇到的不常见的问题。
需求
文本显示长度限制，中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算。即"hh哈哈h"在js中长为5，在这里的需求中长3.5。主要控制一下最终字符串的显示长度。

Vuejs|Vuejs Element input组件区分中英文 统计长度
文章图片
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绑定的值确实更新了，但是输入框里面的值并没有变化，很奇怪。

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

Vuejs|Vuejs Element 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() {}

    推荐阅读


    上一篇：入学前必看，揭秘你所不知道的高校微信运营推广方法！

    下一篇：谢答唐老师外二首