vue 3 中监听 ctrl+s 等系统修饰键组合主要依靠 v-on 链式修饰符（如 .ctrl.s）和 .exact 精确控制，推荐使用 @keydown；需确保元素可聚焦（如加 tabindex="0"），必要时监听 document 级事件。

Vue 3 中监听系统修饰键组合（如 Ctrl+S、Alt+F4、Shift+Delete）主要依靠 v-on（或简写 @）配合按键修饰符实现，关键在于修饰符的**顺序无关性**和 .exact 的精准控制能力。

基础语法：直接链式使用修饰符

系统修饰键修饰符（.ctrl、.alt、.shift、.meta）可自由组合，顺序不影响匹配逻辑：

• @keydown.ctrl.s="handleSave" → 按下 Ctrl+S 触发
• @keyup.alt.f4="handleExit" → 抬起 Alt+F4 触发
• @keydown.shift.delete="handleBulkDelete" → 按下 Shift+Delete 触发

注意：.meta 在 macOS 上对应 ⌘ 键，在 Windows/Linux 上对应 Win/⊞ 键。

避免误触发：用 .exact 限定精确修饰键组合

默认情况下，@keydown.ctrl.s 在按下 Ctrl+Shift+S 时也会触发（因为满足“有 Ctrl 且有 S”）。若只希望严格匹配 Ctrl+S（不含其他修饰键），必须加 .exact：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

• @keydown.ctrl.s.exact="handleSave" → 仅当只有 Ctrl 和 S 被按下时才触发
• @keydown.ctrl.alt.exact="toggleDebug" → 仅 Ctrl+Alt（无其他键）时触发

.exact 修饰符作用于整个修饰键集合，不是单个键；它会忽略非修饰键（如字母、数字），但对额外的修饰键（如多按了一个 Shift）敏感。

键盘事件选择：优先用 @keydown 而非 @keyup

对于组合键操作，推荐使用 keydown：

• keydown 可在按键持续按下时响应（适合快捷键长按场景）
• keyup 需等待释放，可能错过快速连按或与系统快捷键冲突（如浏览器拦截 Ctrl+T）
• 多数编辑器类功能（保存、撤销、切换标签）都基于 keydown

注意事项与常见坑

需确保目标元素能获得焦点，否则键盘事件无法捕获（尤其是非表单、非可聚焦元素）：

• 给容器加 tabindex="0"，例如：<div tabindex="0"> <li>必要时在 <code>mounted 或 onMounted 中主动调用 element.focus()
• 避免在 <input> 或 <textarea></textarea> 内监听全局组合键——此时应监听 document 级事件（通过 onMounted + addEventListener）
• .meta 在部分浏览器中可能被禁用（如某些安全策略下），建议提供备用操作入口