在 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()breakcase 'Escape':this.closeModal()breakcase 'ArrowUp':this.navUp()breakcase ' ':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 原生修饰符方案，需要复杂逻辑时再使用全局监听方案。