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

简介: 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`; // 根据内容计算高度
    }
  }
}
目录
相关文章
|
JavaScript 前端开发 索引
如何判断一个值是否在数组内?
如何判断一个值是否在数组内?
|
缓存 中间件 测试技术
SOME/IP协议实践指南:精选开发与测试工具解析
SOME/IP协议实践指南:精选开发与测试工具解析
1060 0
|
Oracle 关系型数据库 Java
解决读取Oracle数据库US7ASCII编码乱码问题
今天和第三方对接数据时,对方提供了一个视图US7ASCII编码,给代码调试带来了很大的不便。程序输出的mybatis获取的对象及new String(s.getBytes("ISO8859-1"), "GB2312")加解密后都是乱码。
2326 1
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
8517 0
|
机器学习/深度学习 人工智能 算法
[大语言模型-论文精读] Diffusion Model技术-通过时间和空间组合扩散模型生成复杂的3D人物动作
[大语言模型-论文精读] Diffusion Model技术-通过时间和空间组合扩散模型生成复杂的3D人物动作
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
1304 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
JSON 前端开发 JavaScript
如何检查前端项目中未使用的依赖包?
如何检查前端项目中未使用的依赖包?
899 0
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
4231 1
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
element UI【解决方案】消息弹框被对话框遮挡($message消息框被dialog或$alert遮罩)
1073 3