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

第一种:

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

最近更新

  1. TCP协议是安全的吗?

    2024-01-13 11:38:08       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-13 11:38:08       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-13 11:38:08       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-13 11:38:08       18 阅读

热门阅读

  1. Linux部署excalidraw-cn白板

    2024-01-13 11:38:08       33 阅读
  2. 行为型设计模式—职责链模式

    2024-01-13 11:38:08       28 阅读
  3. AcWing:5406. 松散子序列

    2024-01-13 11:38:08       29 阅读
  4. 鸿蒙系列--Http

    2024-01-13 11:38:08       33 阅读
  5. 常见的HTTP接口超时问题出现原因及解决办法

    2024-01-13 11:38:08       39 阅读
  6. Elasticsearch本地单机配置以及php组件使用记录

    2024-01-13 11:38:08       37 阅读
  7. Github Copilot 的使用方法和快捷键

    2024-01-13 11:38:08       52 阅读
  8. linux线程

    2024-01-13 11:38:08       29 阅读
  9. 初始化网络的权重和偏置的方法有哪些?

    2024-01-13 11:38:08       36 阅读
  10. erp项目基本概念理解

    2024-01-13 11:38:08       35 阅读
  11. SQL 语言详解

    2024-01-13 11:38:08       34 阅读