uniapp 文本域如何实现自动增高和设置最大高度

在uniapp中，如何实现textarea文本域自动增高以适应内容长度，同时设置一个最大高度限制？当内容超过最大高度时，希望出现滚动条而不是继续增高。目前测试发现auto-height属性可以实现自动增高，但不知道怎么限制最大高度。求具体实现方法或组件示例代码。

2 回复

在uniapp中，使用textarea组件，设置auto-height属性实现自动增高，通过CSS的max-height样式限制最大高度。

示例：

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

在 UniApp 中，可以通过以下方法实现文本域（<textarea>）的自动增高并设置最大高度：

实现步骤：

  1. 使用 textarea 组件，并绑定 v-model 监听输入内容。
  2. 动态计算高度：通过内容行数或字符数动态调整高度。
  3. 设置最大高度：当计算高度超过限制时，固定为最大高度并启用滚动。

示例代码：

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

<script>
export default {
  data() {
    return {
      text: '',
      minHeight: '40px', // 初始最小高度
      maxHeight: '120px', // 最大高度
      currentHeight: '40px'
    };
  },
  computed: {
    textareaStyle() {
      return {
        height: this.currentHeight,
        'max-height': this.maxHeight,
        overflow: 'auto' // 超过最大高度时滚动
      };
    }
  },
  methods: {
    autoResize() {
      // 创建临时元素计算内容高度
      const tempDiv = document.createElement('div');
      tempDiv.style.width = '100%'; // 假设文本域宽度
      tempDiv.style.fontSize = '14px'; // 匹配文本域字体
      tempDiv.style.padding = '5px'; // 匹配文本域内边距
      tempDiv.style.wordWrap = 'break-word';
      tempDiv.innerText = this.text + '\n'; // 模拟换行
      
      document.body.appendChild(tempDiv);
      let contentHeight = tempDiv.offsetHeight;
      document.body.removeChild(tempDiv);

      // 限制在最小和最大高度之间
      const minH = parseInt(this.minHeight);
      const maxH = parseInt(this.maxHeight);
      contentHeight = Math.min(Math.max(contentHeight, minH), maxH);
      
      this.currentHeight = contentHeight + 'px';
    }
  }
};
</script>

注意事项：

  • 平台差异：H5 端可直接使用 DOM 操作，小程序端需通过 uni.createSelectorQuery() 获取节点信息（代码更复杂）。
  • 性能优化：频繁 DOM 操作可能影响性能，可考虑节流处理。
  • 样式调整：根据实际需求修改 minHeight、maxHeight 和文本域样式（如字体、内边距）。

如果需要小程序端兼容方案，请进一步说明！

回到顶部