在 Vue 中监听常用按键事件（回车，ESC 键，空格等）。

一、Vue 原生按键修饰符（推荐）

html

<!-- 常用按键监听 -->
<input 
  @keyup.enter="submit"      <!-- 回车键 -->
  @keydown.esc="cancel"      <!-- ESC 键 -->
  @keyup.space="togglePlay"  <!-- 空格键 -->
  @keydown.delete="clear"    <!-- Delete 键 -->
  @keydown.tab="nextField"   <!-- Tab 键（需配合 keydown 使用） -->
  @keyup.up="navigate(-1)"   <!-- 方向键上 -->
  @keyup.down="navigate(1)"  <!-- 方向键下 -->
  @keyup.left="moveLeft"     <!-- 方向键左 -->
  @keyup.right="moveRight"   <!-- 方向键右 -->
>

---

二、系统修饰键监听

html

<!-- 组合键监听 -->
<input 
  @keydown.ctrl.s="save"    <!-- Ctrl + S -->
  @keyup.alt.enter="altEnter" <!-- Alt + Enter -->
  @keydown.shift.space="shiftSpace" <!-- Shift + 空格 -->
  @keydown.meta.z="undo"    <!-- Cmd/Win + Z -->
>

---

三、全局监听（适合全页面监听）

javascript

export default {
  mounted() {
    window.addEventListener('keydown', this.handleGlobalKey)
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleGlobalKey)
  },
  methods: {
    handleGlobalKey(e) {
      switch(e.key) {
        case 'Enter':
          if (e.ctrlKey) this.ctrlEnterHandler()
          else this.enterHandler()
          break
        case 'Escape':
          this.closeModal()
          break
        case 'ArrowUp':
          this.navUp()
          break
        case ' ':
          if (!e.repeat) this.pause() // 防止长按重复触发
          break
      }
    }
  }
}

---

四、特殊场景处理

1. 精确控制修饰符（确保只有指定组合生效）

html

<input @keydown.ctrl.exact="ctrlOnlyHandler"> <!-- 仅 Ctrl 按下时触发 -->

1. 阻止默认行为

html

<input @keydown.tab.prevent="customTabHandler"> <!-- 拦截 Tab 默认行为 -->

1. 数字小键盘监听

html

<input @keyup.numpad-enter="calculate"> <!-- 小键盘回车 -->

---

五、常用按键别名表

按键	Vue 修饰符	对应 Key 值
回车	.enter	Enter
删除	.delete	Delete/Backspace
退出	.esc	Escape
空格	.space	' '
Tab	.tab	Tab
方向键	.up/.down/.left/.right	ArrowUp 等
系统键	.ctrl/.alt/.shift/.meta	Meta=Win/Cmd

---

六、注意事项

1. 避免内存泄漏：全局监听务必在 beforeUnmount 中移除

2. 事件重复触发：长按按键会持续触发，可用 e.repeat 判断

3. 输入法兼容：中文输入法下部分按键可能不响应

4. 焦点控制：确保监听元素已获得焦点（可用 autofocus 属性）

5. 组合键顺序：修饰键需要按最后书写（如 @keyup.ctrl.s）

我们可以根据具体需求选择最合适的监听方式，推荐优先使用 Vue 原生修饰符方案，需要复杂逻辑时再使用全局监听方案。