vue3中 写一个文本框 当一行中有8个文字可以自动换行并且高度自适应

在Vue3中，你可以使用Element UI库提供的`el-input`组件，它内置了高度自适应和自动换行的功能。如果你想实现在输入达到指定字符数后自动换行，可以通过设置`rows`属性来控制每行的行数。下面是一个简单的例子：

<template>
  <div ref="inputWrapper">
    <el-input
      v-model="text"
      :rows="8"   <!-- 指定每行显示8个字符 -->
      placeholder="请输入内容..."
      @input="handleInput"   <!-- 触发事件处理输入变化 -->
    ></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleInput(e) {
      // 如果输入的文字长度超过每行限制（这里是8个字符），可以在这里添加处理，例如清空超出的部分或分割换行
      if (e.target.value.length > 8) {
        // 这里只是一个示例，实际应用中可以根据需要处理
        e.target.value = e.target.value.slice(0, 8);
      }
    },
  },
};
</script>

在这个例子中，`@input`事件会在用户输入时触发，你可以根据`event.target.value`的长度来判断是否需要换行。