uni-app textarea 设置ignoreCompositionEvent=false 和 auto-height 时输入文字时 textarea的高度会来回变动

在uni-app中，textarea组件的ignoreCompositionEvent和auto-height属性通常用于处理用户输入时的不同需求。ignoreCompositionEvent设置为false时，可以确保在输入法（IME）组合输入过程中触发input事件，而auto-height则根据内容自动调整文本域的高度。

然而，当这两个属性同时使用时，特别是在中文等需要输入法组合的场景下，确实可能会导致textarea的高度在输入过程中频繁变动，因为每次输入法的组合字符变化都会触发内容的变化，从而导致高度重新计算。

以下是一个简化的代码示例，展示了如何在uni-app中使用textarea组件，并尝试通过编程方式控制高度变化，尽管直接解决高度频繁变动的问题可能比较复杂，因为这涉及到输入法行为本身。这里我们主要展示如何设置这些属性以及如何通过事件监听来观察高度变化。

<template>
  <view>
    <textarea
      v-model="inputText"
      :ignore-composition-event="false"
      auto-height
      placeholder="请输入内容"
      @input="handleInput"
      @compositionstart="handleCompositionStart"
      @compositionend="handleCompositionEnd"
      style="border: 1px solid #000; padding: 10px;"
    />
    <view>当前高度: {{ textareaHeight }}px</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      textareaHeight: 0,
      isComposing: false,
    };
  },
  methods: {
    handleInput(e) {
      // 在输入法组合过程中，避免处理高度变化
      if (!this.isComposing) {
        this.$nextTick(() => {
          const textarea = this.$el.querySelector('textarea');
          this.textareaHeight = textarea.scrollHeight;
        });
      }
    },
    handleCompositionStart() {
      this.isComposing = true;
    },
    handleCompositionEnd() {
      this.isComposing = false;
      // 可以在这里手动触发一次高度调整
      this.handleInput({});
    },
  },
};
</script>

在上述代码中，我们通过监听compositionstart和compositionend事件来标记输入法组合输入的开始和结束。在input事件处理函数中，我们检查isComposing状态，以避免在输入法组合过程中处理高度变化。当组合输入结束时，我们手动触发一次高度调整。

这种方法不能完全解决所有情况下的高度频繁变动问题，但提供了一种思路来控制和处理这种情况。实际应用中，可能需要根据具体需求进行进一步的调整和优化。