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

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

html

  @keydown.esc="cancel"      
  @keyup.space="togglePlay"  
  @keydown.delete="clear"    
  @keydown.tab="nextField"   
  @keyup.up="navigate(-1)"   
  @keyup.down="navigate(1)"  
  @keyup.left="moveLeft"     
  @keyup.right="moveRight"   
>

---

二、系统修饰键监听

html

  @keyup.alt.enter="altEnter" 
  @keydown.shift.space="shiftSpace" 
  @keydown.meta.z="undo"    
>

---

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

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

1. 阻止默认行为

html

1. 数字小键盘监听

html

---

五、常用按键别名表

按键	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 原生修饰符方案，需要复杂逻辑时再使用全局监听方案。