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

性野喜悲2025-11-20 8:29

效果图：

代码：

复制代码

<!-- 在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自动适配 */
}