Vue3回车键实现 Tab 键功能

最近用vue做一个页面的tab功能,客户需要用回车换行。以下这段代码实现了在这3个文本输入框中，按下回车键时模拟 Tab 键的效果，将焦点切换到下一个输入框。

1<template>
2  <div @keydown="handleKeyDown">
3    <el-input v-model="input1" style="width: 240px" placeholder=" 请输入" />
4    <div style="margin: 20px 0" />
5    <el-input v-model="input2" style="width: 240px" placeholder=" 请输入" />
6    <div style="margin: 20px 0" />
7    <el-input v-model="input3" style="width: 240px" placeholder=" 请输入" />
8  </div>
9</template>
10
11<script lang="ts" setup>
12import { ref } from "vue";
13const input1 = ref("");
14const input2 = ref("");
15const input3 = ref("");
16
17// 处理键盘按下事件
18const handleKeyDown = (event: KeyboardEvent) => {
19  if (event.keyCode === 13) {
20    // 回车键的键码为 13
21    event.preventDefault();
22    const inputs: any = document.querySelectorAll("input, select");
23    let currentIndex = -1;
24    for (let i = 0; i < inputs.length; i++) {
25      if (inputs[i] === event.target) {
26        currentIndex = i;
27        break;
28      }
29    }
30    if (currentIndex >= 0 && currentIndex < inputs.length - 1) {
31      inputs[currentIndex + 1].focus();
32    }
33  }
34};
35</script>
36

如有疑问或其他问题。可以根据自己的需求修改一下。