ts+unispp小程序textarea多行文本高度自使用

效果图:

代码:

复制代码
<!-- 在textarea标签中添加auto-height属性 -->
<textarea
  placeholder="无"
  placeholder-class="placeholder"
  :disabled="true"
  class="textarea-style"
  :value="orderDetails?.couponInfo"
  auto-height  <!-- 关键:启用自动高度调整 -->
></textarea>

.textarea-style {
  width: 100%; /* 改为100%适应父容器,避免内容溢出 */
  border: 2rpx solid #e7e7e7;
  /* 移除height: auto,由auto-height属性控制 */
  min-height: 100rpx; /* 保留最小高度,确保初始占位 */
  border-radius: 12rpx;
  flex: 1;
  padding: 16rpx; /* 适当增大内边距,优化显示 */
  word-break: break-all; /* 强制换行,避免内容溢出 */
  white-space: pre-wrap; /* 保留文本中的换行符(如\n、↵)并自动换行 */
  box-sizing: border-box; /* 关键:让padding和border不影响整体宽度 */
  resize: none; /* 禁止手动拉伸(可选,根据需求) */
  overflow: hidden; /* 隐藏滚动条,由auto-height自动适配 */
}
相关推荐
鬼手点金2 小时前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
蛋蛋的就会顺顺的3 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
程序员Sunday3 小时前
TypeScript 的 any、unknown、never 有什么区别?
前端·面试·typescript
朱涛的自习室3 小时前
70 美金的 Beyond Compare,我让 Gemini 4 和 DeepSeek 造个开源免费版(Day 2)
android·前端·人工智能
需要8264 小时前
Spring Bean 生命周期:从实例化到销毁的完整钩子
java·后端·spring
小 黄 鸡4 小时前
HashMap 面试必会知识点详解(JDK 8)
java·面试·职场和发展
码艺-Alimjan4 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
小马不起床4 小时前
零基础玩转 FastAPI_11:前端后台管理页面
前端·状态模式·fastapi
子非鱼a5 小时前
【文件上传】一个普普通通的edu16
前端
美狐美颜SDK开放平台6 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk