vue3 input输入框 Enter回车键跳转下一个输入框

在 Vue3 中，为了实现在 `input` 输入框按下 Enter 键后自动跳转到下一个输入框，你可以利用自定义事件、V-model 和 Vue 的生命周期钩子。以下是一个简单的示例：

1. 首先，确保你的 HTML 结构中有两个 `v-model` 指向的输入框，并给每个输入框添加一个唯一的 `ref` 属性，例如：

<template>
  <div>
    <input ref="input1" v-model="value1" @keyup.enter.prevent="handleNextInput('input2')">
    <input ref="input2" v-model="value2" @keyup.enter.prevent="handleNextInput('input3')">
    <!-- 更多输入框... -->
  </div>
</template>

2. 然后，在 Vue 实例中创建 `handleNextInput` 方法，它接受下一个输入框的 `ref` 名称作为参数：

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

const value1 = ref('');
const value2 = ref('');

function handleNextInput(nextRef) {
  if (nextRef === 'input2' && value1.value !== '') {
    // 执行值的保存或其他处理...
    console.log('Value1:', value1.value);
    value1.value = '';
  } else if (/* 添加更多的条件检查... */) {
    // 跳转到下一个输入框并清空当前输入框的值
    const nextInput = ref.current;
    nextInput.focus();
  }
}
</script>

在上面的代码中，我们使用了 `@keyup.enter.prevent` 来阻止默认的提交行为，并在用户按下 Enter 时调用 `handleNextInput`。在该方法中，你需要根据实际的需求来控制值的处理以及如何切换到下一个输入框。