vue3 input设置自动换行

Vue3 中的 Input 组件如果你想实现文本自动换行，通常需要借助于 HTML 的特性结合 Vue 的绑定。HTML 提供了 `<textarea>` 标签可以支持多行输入，对于 `input` 元素，虽然默认不支持自动换行，但在 Vue 中你可以通过一些技巧模拟类似功能。

1. 使用 textarea 标签：
如果你的需求比较简单，可以直接使用 `<textarea>`，并将其值绑定到 Vue 数据上：

<template>
  <div>
    <textarea v-model="text" :rows="rows"></textarea>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const text = ref('');
const rows = ref(5); // 设置初始行数
</script>

这里，`v-model` 实现双向数据绑定，`:rows` 控制显示的行数。

2. 自定义指令模拟：
如果需要更精确地控制，可以创建一个自定义指令用于处理换行。这通常会涉及到事件监听和字符串分割处理：

<template>
  <input type="text" v-textarea-wrap v-bind:value="text">
</template>

<script setup>
import { onMounted } from 'vue';

function autoLineBreaks(input, value) {
  // 模拟换行，例如每行限制80字符
  const lines = value.split('\n').map(line => line.slice(0, 80));
  onMounted(() => (input.value = lines.join('\n')));
}

const text = ref('这是个多行输入示例');
vite.directive('v-textarea-wrap', {
  bind(el, binding, vnode) {
    autoLineBreaks(el, binding.value);
  },
});
</script>

这个例子中，当 `v-textarea-wrap` 触发时，会在输入框里自动添加换行。