第一种:
<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
,然后在该方法里手动计算文本框的高度并实现自适应:文章来源地址https://www.toymoban.com/news/detail-813289.html
methods: {
autoAdjustReviewInput() {
const textArea = this.$refs.reviewInput.$refs.textarea; // 获取 el-input 组件中的 textarea 节点
if (textArea) {
textArea.style.height = 'auto'; // 先将高度设置为自适应
textArea.style.height = `${textArea.scrollHeight}px`; // 根据内容计算高度
}
}
}
文章来源:https://www.toymoban.com/news/detail-813289.html
到了这里,关于textarea文本框根据输入内容自动适应高度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!