vue3项目 写一个可以自动换行的文本框 每次换行高度会自动变化

在Vue3项目中创建一个可以自动换行且每行高度随内容自适应的文本框，通常会使用`v-model`指令结合`<textarea>`标签，并利用CSS来处理换行和动态高度。这里是一个简单的例子：

<template>
  <div class="text-area-wrapper">
    <textarea v-model="inputText" placeholder="输入文字并按Enter键换行..." :rows="numberOfLines"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      numberOfLines: 1, // 初始行数
    };
  },
  watch: {
    inputText(newVal) {
      this.numberOfLines = Math.ceil(newVal.split('\n').length);
    },
  },
};
</script>

<style scoped>
.text-area-wrapper {
  resize: none; // 阻止用户调整大小
}

.textarea {
  overflow-y: auto; // 自动滚动
  line-height: 1; // 设置每一行的高度等于字体大小，这样高度会随着文字增多而动态改变
}
</style>

在这个例子中，每当文本框的内容发生变化(`inputText`数据绑定)，我们计算新的行数并更新`numberOfLines`属性。`<textarea>`的`rows`属性会被设置为这个值，使得换行后的高度自动调整。