Vue3中如何根据操作系统切换Input的快捷键事件修饰符？

方案一：动态绑定事件修饰符 #

利用Vue3的动态事件绑定特性，直接根据系统类型拼接事件字符串，在模板里完成快捷键切换：

<input
  v-if="sidebar.collapsed == false || sidebar.collapsedSwitch == false"
  @focus="onFocus"
  @blur="onFocusLost"
  @[`keydown.${$device.isMacOS ? 'meta' : 'ctrl'}.k`]="onCtrlCmdK"
  ref="input"
  class="w-16 h-5 bg-transparent outline-none"
  :class="{ 'focus:w-5/6': isInputFocused }"
  type="text"
  :placeholder="$t('_global.search')"
/>

Vue3支持动态生成带修饰符的事件名称，会自动根据$device.isMacOS的值切换meta或ctrl修饰符，写法简洁直接。

方案二：在事件处理函数中判断按键 #

如果觉得模板拼接字符串不够直观，可以统一监听keydown事件，在函数内部判断触发条件：

先修改模板：

<input
  v-if="sidebar.collapsed == false || sidebar.collapsedSwitch == false"
  @focus="onFocus"
  @blur="onFocusLost"
  @keydown="handleKeydown"
  ref="input"
  class="w-16 h-5 bg-transparent outline-none"
  :class="{ 'focus:w-5/6': isInputFocused }"
  type="text"
  :placeholder="$t('_global.search')"
/>

再在脚本中实现处理逻辑：

const handleKeydown = (e) => {
  // 根据系统判断需要触发的修饰键
  const isModifierPressed = $device.isMacOS ? e.metaKey : e.ctrlKey
  // 同时按下修饰键和K键时执行目标逻辑
  if (isModifierPressed && e.key === 'k') {
    onCtrlCmdK()
    e.preventDefault() // 可选：阻止浏览器默认的搜索快捷键行为
  }
}

这种方式把快捷键判断逻辑集中在函数里，后续调整规则时只需修改函数，适合需要添加更多按键判断的场景。

内容的提问来源于stack exchange，提问作者mattBurnett