uniapp u-textarea高度设置内容超出怎么办？

在uniapp中使用u-textarea组件时，设置了固定高度后，当输入内容超出高度时无法自动扩展，导致部分内容被隐藏。请问如何实现内容超出时自动调整高度，或者至少显示滚动条让用户可以查看全部内容？目前尝试过设置min-height和max-height属性但无效。

2 回复

设置maxlength限制字符数，或使用auto-height属性自动调整高度。也可监听@linechange事件动态计算高度，结合height属性控制。


在 UniApp 中，u-textarea 组件内容超出时，可以通过以下方法解决：

  1. 设置 auto-height 属性：
    启用自动高度调整，组件会根据内容动态调整高度。

    <u-textarea v-model="value" auto-height></u-textarea>

  2. 自定义高度与滚动：
    设置固定高度并启用滚动，适用于需要限制高度的情况。

    <u-textarea 
  v-model="value" 
  height="200" 
  :show-confirm-bar="false"
></u-textarea>

  3. 结合样式调整：
    通过 CSS 控制最小高度和溢出行为：

    <u-textarea 
  v-model="value" 
  :style="{ minHeight: '120px', overflowY: 'auto' }"
></u-textarea>

注意事项：

  • 若内容过长，建议搭配滚动条使用（默认已启用）。
  • 检查父容器高度是否受限，避免布局挤压。

根据需求选择合适方案即可灵活控制文本域高度。

回到顶部