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自动适配 */
}
相关推荐
原则猫10 小时前
前端基础大厦
前端
陈随易11 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·后端·程序员
SoaringHeart12 小时前
Flutter进阶:基于 EasyRefresh 的下拉刷新封装 n_easy_refresh_mixin.dart
前端·flutter
IT_陈寒14 小时前
Vite的热更新突然不香了,排查三小时差点砸键盘
前端·人工智能·后端
子兮曰14 小时前
Agency-Agents 深度解析:400+ AI 专家的"梦之队"如何重塑开发工作流
前端·后端·vibecoding
竹林81815 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
karry_k15 小时前
MyBatis批量insert-select踩坑:useGeneratedKeys=true 可能让PostgreSQL返回大量插入结果
java·后端
妙码生花15 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十九):点选验证码代码逐行目检
前端·后端·go
karry_k15 小时前
PostgreSQL 在 MyBatis 中执行正常 SQL 失效:一次 DELETE USING 踩坑记录
java·后端
Awu122716 小时前
⚡从零开发 Agent CLI(五)实现一个可治理、可扩展的工具系统
前端·人工智能·claude