uniapp textarea高度如何动态调整

在uniapp中，如何实现textarea组件的高度动态调整？比如根据输入内容的行数自动增加高度，或者通过代码手动控制高度变化。尝试过设置auto-height属性但效果不理想，是否有更可靠的解决方案？希望能提供具体代码示例。

2 回复

在uniapp中，可通过auto-height属性让textarea高度自适应内容变化。也可用v-model绑定值，监听输入变化，动态计算高度并设置style。


在 UniApp 中，动态调整 textarea 高度可以通过以下步骤实现：

  1. 绑定数据：使用 v-model 绑定 textarea 的值到 data 中的变量。
  2. 监听输入：通过 @input 事件监听输入变化，并触发高度调整函数。
  3. 计算高度：根据内容行数或字符数动态计算高度，并更新样式。

示例代码

<template>
  <view>
    <textarea 
      v-model="textValue" 
      @input="adjustHeight" 
      :style="{ height: textareaHeight + 'px' }" 
      auto-height="false" <!-- 禁用默认 auto-height，改用自定义逻辑 -->
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      textValue: '',
      textareaHeight: 40 // 初始高度
    };
  },
  methods: {
    adjustHeight() {
      // 根据行数调整高度（假设每行高度约 20px）
      const lines = this.textValue.split('\n').length;
      this.textareaHeight = Math.max(40, lines * 20); // 最小高度 40px
    }
  }
};
</script>

说明：

  • 核心逻辑：在 @input 事件中计算内容行数，并动态设置 height 样式。
  • 注意事项：
    • 禁用 auto-height 属性以避免冲突。
    • 高度计算可根据实际需求调整（例如按字符数或内容宽度）。
    • 如果内容超出可视区域，可结合 scroll-view 实现滚动。

此方法简单有效，适用于大部分动态调整高度的场景。

回到顶部