uniapp textarea 赋值后 @linechange 获取的高度错误如何解决？

在uniapp中使用textarea组件时，当通过v-model动态赋值后，@linechange事件获取的高度与实际显示高度不一致。尝试在赋值后手动触发resize或setTimeout延迟获取高度，但依然不准确。请问如何正确获取赋值后的textarea真实高度？是否需要特定的处理时机或API？

2 回复

在赋值后手动调用 $nextTick，确保DOM更新后再触发 @linechange 事件。或者使用 setTimeout 延迟获取高度。


在 UniApp 中，textarea 组件赋值后 @linechange 获取高度错误，通常是因为数据更新与渲染不同步导致的。以下是解决方案：

1. 使用 $nextTick 确保渲染完成

在赋值后，使用 $nextTick 等待组件渲染完成再获取高度。

<template>
  <textarea 
    :value="text" 
    @linechange="onLineChange"
  ></textarea>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    updateText(newText) {
      this.text = newText;
      this.$nextTick(() => {
        // 手动触发 linechange 事件或获取高度
      });
    },
    onLineChange(event) {
      console.log('当前高度:', event.detail.height);
    }
  }
}
</script>

2. 延迟触发 @linechange

如果直接赋值后高度计算不准确，可以添加一个小的延迟。

updateText(newText) {
  this.text = newText;
  setTimeout(() => {
    // 手动触发或处理高度逻辑
  }, 50);
}

3. 使用 setData 回调（小程序端）

在小程序环境中，使用 this.$mp.page.setData 的回调确保更新完成。

updateText(newText) {
  this.$mp.page.setData({
    text: newText
  }, () => {
    // 在这里处理高度获取
  });
}

4. 手动调整获取时机

避免在赋值后立即获取高度，通过用户交互或特定条件触发。

总结

核心问题是赋值后组件未完成渲染，使用 $nextTick 或适当延迟可解决。如果问题持续，检查是否有样式影响（如 min-height、max-height）或 UniApp 版本兼容性。

回到顶部