textarea文本框根据输入内容自动适应高度

最新推荐文章于 2024-09-12 16:43:23 发布

Y2000104

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量1k

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/y2000104/article/details/135567589

版权

本文介绍了如何在Vue应用中使用el-input的textarea组件，并实现内容变化时的自动高度自适应功能，包括使用`@input`事件监听内容变化和计算scrollHeight来动态调整textarea的高度。

摘要由CSDN通过智能技术生成

第一种：

<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`; // 根据内容计算高度
    }
  }
}