el input 多行文本 textarea bug

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

在 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>