第一种:
<el-input auto-complete='off' type='textarea' :autosize="{minRows:3,maxRows:10}" class="no-scroll"> </el-input>
/* 页面的样式表 */ .no-scroll textarea { overflow: hidden; /* 禁用滚动条 */ resize: none; /* 禁止用户手动调整文本框的尺寸 */ height: auto !important; /* 强制将高度设置为自适应 */ max-height: none !important; /* 禁用最大高度限制 */ }
第二种:
<el-input auto-complete='off' type='textarea' ref="reviewInput" @input="autoAdjustReviewInput"> </el-input>
加一个监听该文本框内容变化的方法 oninput
,然后在该方法里手动计算文本框的高度并实现自适应:
methods: { autoAdjustReviewInput() { const textArea = this.$refs.reviewInput.$refs.textarea; // 获取 el-input 组件中的 textarea 节点 if (textArea) { textArea.style.height = 'auto'; // 先将高度设置为自适应 textArea.style.height = `${textArea.scrollHeight}px`; // 根据内容计算高度 } } }