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>