vue3 配合Vant 画一个会换行的输入框（一行超过十个字就换行）且高度自适应 要求输入的文字不能超过50个 文字垂直居中

在 Vue3 中配合 Vant UI，你可以使用 `<van-input>` 组件来创建这样一个会自动换行的文本输入框，并结合 CSS 实现文字限制、垂直居中以及高度自适应。这里是一个简单的示例：

首先，在组件模板中引入输入框并设置基本样式：

<template>
  <div class="custom-input">
    <van-input v-model.trim="inputValue" placeholder="请输入内容" @input="checkInputLength"></van-input>
  </div>
</template>

然后，在 `script` 部分添加必要的数据属性和方法：

<script setup>
import { ref } from 'vue';
const inputValue = ref('');
function checkInputLength(e) {
  if (e.target.value.length > 50 || e.target.value.split('\n').length * 10 > 50) {
    // 如果长度超限，清空输入并提示用户
    e.target.value = '';
    alert('输入过长，请控制在50个字符以内');
  }
}
</script>

接下来，定义 CSS 样式，包括换行和垂直居中的效果：

<style scoped>
.custom-input {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: auto; /* 自适应高度 */
}

.custom-input input {
  resize: none; /* 阻止上下滚动 */
  overflow: hidden; /* 当内容超过宽度时隐藏多余部分 */
  white-space: pre-wrap; /* 换行 */
  word-break: break-all; /* 破单词换行 */
  width: calc(100% - 4px); /* 减去边距以保证内边距均匀分布 */
  padding: 8px;
  box-sizing: border-box;
}
</style>

这样，当输入的文字超过十个汉字（每个汉字大概占两个字符的位置，所以是10*2=20字符），就会换行。同时，输入的内容会被限制在50个字符以内。