vue3项目 写一个自适应高度且可以换行的文本框

在Vue3项目中创建一个自适应高度且可以自动换行的文本框，通常会使用`v-model`指令配合`<textarea>`元素，并利用CSS样式来控制其特性。以下是一个简单的例子：

<template>
  <div class="input-container">
    <textarea v-model="inputText" rows="4" :style="{ resize: 'both', height: 'auto', overflow: 'scroll' }"
      placeholder="请输入内容，支持多行且高度自适应"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
    };
  },
};
</script>

<style scoped>
.input-container {
  width: 100%; /* 或者你希望的宽度 */
}
</style>

在这个示例中：
- `v-model`将用户的输入绑定到组件的数据属性`inputText`上。
- `rows=4`设置默认显示4行，你可以根据需要调整这个值。
- `resize: 'both'`允许用户调整文本框大小。
- `height: 'auto'`表示文本框的高度根据内容自动调整。
- `overflow: 'scroll'`确保当内容超过盒子高度时，会出现滚动条。