Vue控制textarea可输入行数限制-案例

 控制只能输入六行内容

 UI部分代码

//我使用了antd ui库


{{ this.row }}/6

业务处理逻辑部分代码 

正则说明 

row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g,"aa").length / 20) 解读

1. 正则表达式这里的意思是，如果是汉字就转换成aa，因为一个汉字所占的长度等于两个字母。
2. 这里的20指的是单行字符的最大个数，可以根据你的textarea的实际情况来调整。然后进行向上取整。
3. 为什么要向上取整呢？比如这里单行的最大字符数是20，如果输入20个字符以内，除以20获得的是个小于1的小数，但是这个小于20的字符显然是一行，所以向上取整为1。同理，如果是21，显然超过了单行最大字符数，占了两行，除以20得到1.05，向上取整就是2，正好两行。