需求

限制 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修改为合适的值