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

 控制只能输入六行内容

 UI部分代码

//我使用了antd ui库
<a-form-model-item
ref="address_group"
label="规则描述"
prop="address_group"
>
<a-textarea
  :rows="6"
  style="width: 60%"
  placeholder="一次最多输入6行，多个换行输入"
  v-model="form.address_group"
/>
<span style="float: right; color: #999">{{ this.row }}/6span>
a-form-model-item>

业务处理逻辑部分代码 

正则说明 

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，正好两行。