当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/279314.html

相关文章:

  • 【JAVA基础--计算机网络】--TCP三次握手+四次挥手
  • 最新靠谱可用的-Mac-环境下-FFmpeg-环境搭建
  • 【漏洞复现】Hikvision SPON IP网络对讲广播系统存在命令执行漏洞CVE-2023-6895
  • 微软为Windows内置记事本应用开发AI功能;2024年15个 AI 语音生成器
  • 【C++进阶06】红黑树图文详解及C++模拟实现红黑树
  • 2023年最严重的10起0Day漏洞攻击事件
  • Linux之Iptables简易应用
  • 树状结构查询 - 华为OD统一考试
  • 版本控制系统教程
  • Java多线程并发篇----第十篇
  • 模型\视图一般步骤:为什么经常要用“选择模型”QItemSelectionModel?
  • C#,愚弄数(Hoax Number)的计算方法与源代码
  • c JPEG编码,此程序没有处现MCU中亮度分量的排序
  • 前端规范扩展
  • 【AI视野·今日NLP 自然语言处理论文速览 第七十二期】Mon, 8 Jan 2024
  • RT-Thread基于AT32单片机的CAN应用
  • LeetCode---121双周赛---数位dp
  • RT-Thread I/O设备模型
  • CloudCompare——拟合空间球
  • 哪个牌子的护眼台灯适合学生?2024护眼台灯推荐
  • 适用于动态 IT 环境的服务器流量监控软件
  • Java的Jar包和War包
  • 第二十一章 javascript数据代理(数据劫持)
  • 苹果电脑RAW图像处理软件Capture One Pro 22 mac软件介绍
  • phpcms v9后台添加草稿箱功能
  • 机器人持续学习基准LIBERO系列5——获取显示深度图
  • Java 面试题 - 多线程并发篇
  • 2401d,讨论d串滑动参数
  • etcd官方docker镜像及dockerfile问题处理
  • 2023 IoTDB Summit:天谋科技高级开发工程师苏宇荣《汇其流:如何用 IoTDB 流处理框架玩转端边云融合》...