uniapp textarea 如何实现自动高度并设置最大高度

在uniapp中，如何让textarea组件根据输入内容自动调整高度，同时设置一个最大高度限制？目前textarea默认是固定高度的，输入内容超出时会显示滚动条。我想要实现类似微信聊天输入框的效果：初始高度为最小行高，随着内容增加自动增高，但达到设定的最大高度后不再增高，改为内部滚动。请问应该如何实现这种效果？需要用到哪些属性或自定义组件？

2 回复

在uniapp中，textarea要实现自动高度并设置最大高度，可以使用auto-height属性开启自动高度，同时通过CSS设置max-height来限制最大高度。

示例代码：

<textarea 
  auto-height 
  style="max-height: 200px;"
  placeholder="请输入内容"
></textarea>

这样textarea就会根据内容自动调整高度，但不会超过200px。


在 UniApp 中，可以通过动态绑定 textarea 的 style 属性来实现自动高度并设置最大高度。以下是实现方法：

实现步骤：

  1. 使用 @input 事件监听输入内容变化。
  2. 动态计算内容高度，并更新 textarea 的高度。
  3. 设置最大高度限制，当内容高度超过时停止增加。

示例代码：

<template>
  <view>
    <textarea 
      v-model="content" 
      @input="autoResize" 
      :style="textareaStyle" 
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      textareaHeight: 'auto', // 初始高度
      maxHeight: 200 // 最大高度（单位：px）
    };
  },
  computed: {
    textareaStyle() {
      return {
        height: this.textareaHeight,
        'max-height': this.maxHeight + 'px',
        overflow: 'auto' // 超过最大高度时显示滚动条
      };
    }
  },
  methods: {
    autoResize() {
      // 使用 $nextTick 确保 DOM 已更新
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('textarea').boundingClientRect(data => {
          if (data) {
            // 计算新高度，不超过最大高度
            let newHeight = Math.min(data.scrollHeight, this.maxHeight);
            this.textareaHeight = newHeight + 'px';
          }
        }).exec();
      });
    }
  }
};
</script>

说明：

  • 自动高度：通过监听 @input 事件，动态获取 textarea 的 scrollHeight（内容高度），并设置为组件高度。
  • 最大高度：通过 maxHeight 变量限制最大高度，当内容高度超过时，高度不再增加，并显示滚动条。
  • 注意事项：使用 $nextTick 确保在 DOM 更新后获取正确的高度值。

优化建议：

  • 如果内容高度变化频繁，可考虑添加防抖函数减少计算次数。
  • 确保 textarea 的 CSS 样式（如 padding、border）与高度计算一致，避免误差。

这样即可实现 textarea 的自动高度调整，并在达到最大高度时显示滚动条。

回到顶部