需求
限制 textarea中只能输入3行
实现思路
watch监听 textarea中的内容,实时计算内容的行数,若新值超过3行,则恢复原来的值
代码
<el-input type="textarea" placeholder="请输入内容" v-model="content"> </el-input>
data
content: '',
watch
watch: { 'content'(newValue, oldValue) { if (this.getRow() > 3) { this.content = oldValue } } },
methods
getRow() { let row = 0 this.content.split("\n").forEach(item => { if (item.length === 0) { row += 1 } else { row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g,"aa").length / 20) } }) return row }
根据textarea的宽度,将20修改为合适的值