uniapp textarea 高度如何动态调整

在uniapp中，如何实现textarea组件的高度根据输入内容动态调整？我现在使用textarea时，如果内容超出默认高度就会出现滚动条，但希望它能像微信聊天输入框那样自动增高。尝试过通过@input事件获取内容高度并动态设置style，但效果不理想，有时会出现闪烁或高度计算不准的情况。请问有没有成熟的解决方案或组件可以实现这个效果？

2 回复

使用 textarea 组件的 auto-height 属性，设置为 true 即可自动调整高度。或者通过 JS 动态计算内容高度，再设置 style 中的高度值。


在 UniApp 中，动态调整 textarea 的高度可以通过以下方法实现：

方法一：使用 auto-height 属性

设置 auto-height 属性为 true，让 textarea 根据内容自动调整高度。

<textarea 
  auto-height 
  placeholder="输入内容自动调整高度" 
  v-model="textValue"
></textarea>

说明：

  • 简单直接，适用于内容变化时自动扩展高度。
  • 但无法自定义最小或最大高度。

方法二：动态绑定 style 或 class

通过数据绑定动态计算高度，并应用到 textarea 的样式。

<textarea 
  :style="{ height: textareaHeight + 'px' }" 
  @input="adjustHeight"
  v-model="textValue"
  placeholder="输入时调整高度"
></textarea>

在 script 中：

export default {
  data() {
    return {
      textValue: '',
      textareaHeight: 40 // 初始高度
    };
  },
  methods: {
    adjustHeight() {
      // 根据内容行数或字符数计算新高度
      const lineHeight = 20; // 每行高度（根据字体大小调整）
      const minHeight = 40;
      const newHeight = Math.max(this.textValue.split('\n').length * lineHeight, minHeight);
      this.textareaHeight = newHeight;
    }
  }
};

说明：

  • 灵活，可自定义计算逻辑（例如基于行数、字符数）。
  • 需根据实际 UI 调整 lineHeight 和 minHeight。

注意事项

  1. 平台差异：在部分平台（如小程序）中，textarea 的样式可能受限，需测试目标平台兼容性。
  2. 性能：频繁调整高度可能影响性能，建议对计算逻辑进行优化（如防抖）。

根据需求选择合适的方法，通常 auto-height 已能满足多数场景。

回到顶部