el input 多行文本 textarea bug

Question

el input 多行文本 textarea
autosize 实现内容自适应
但是如果手动拉高高度之后 为什么autosize就失效了 不会自适应了

Answer 1

在 Element UI 的 el-input 组件中，使用 autosize 属性可以实现多行文本框的内容自适应功能。

但是，如果手动更改了文本框的高度，那么 autosize 属性就会失效，原因是因为高度已经被手动设置，而不是由自适应功能自动计算。

解决这个问题的方法是在手动更改文本框高度后，调用 el-input 的 autosize.update() 方法来重新计算文本框的高度。

在组件的script中，可以定义一个变量来记录高度，再在更改高度后调用 autosize.update() 方法，如下所示：

data(){
  return {
    height: 40
  }
}
methods: {
  changeHeight(newHeight) {
    this.height = newHeight;
    this.$refs.textarea.autosize.update();
  }
}

在模板里：

<el-input
  ref="textarea"
  v-model="text"
  :autosize="{ minRows: 2, maxRows: 4 }"
  :style="{ height: height + 'px' }"
  @input="changeHeight"
>
</el-input>