Vue实现textarea内容自动调整高度方法详解

要实现在Vue中的textarea根据内容长度自动调整高度，你可以使用自定义指令或者监听textarea的输入事件来实现。下面是一个使用监听输入事件的示例：

1. 在Vue组件中，定义一个textarea，并监听其输入事件：

<template>
  <div>
    <textarea v-model="content" @input="adjustTextareaHeight"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  },
  methods: {
    adjustTextareaHeight() {
      const textarea = this.$refs.textarea;
      textarea.style.height = 'auto';
      textarea.style.height = textarea.scrollHeight + 'px';
    }
  }
};
</script>

在这个示例中，我们使用v-model指令绑定textarea的内容到content属性上，并监听input事件来调用adjustTextareaHeight方法。

2. 在adjustTextareaHeight方法中，我们首先获取textarea元素的引用，然后将其高度设置为'auto'，然后再设置为scrollHeight，这样就可以根据内容的高度自动调整textarea的高度。

3. 请确保在textarea元素上使用ref="textarea"来获取textarea元素的引用。

这样，当用户输入内容时，textarea的高度会根据内容的长度自动调整。这种方法可以确保textarea的高度始终适应内容的高度，而不会出现滚动条。