vue键盘实现

键盘事件绑定

在Vue中可以通过v-on指令或@简写绑定键盘事件。常用的键盘事件包括keydown、keyup和keypress。基础用法是在模板中直接绑定事件处理函数：

<input @keydown="handleKeyDown" />

按键修饰符

Vue提供特殊的按键修饰符来监听特定按键事件。可以直接在事件后添加按键名称作为修饰符：

<input @keyup.enter="submitForm" />
<input @keydown.space="playVideo" />

常用修饰符包括.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right以及数字键.1-.0。

系统修饰键

对于系统组合键可以使用.ctrl、.alt、.shift和.meta修饰符：

<div @click.ctrl="doSomething">Ctrl+Click</div>

这些修饰键需要与其他按键或鼠标事件配合使用。.exact修饰符可以精确控制组合键：

<button @click.ctrl.exact="onCtrlClick">仅Ctrl点击触发</button>

自定义按键修饰符

通过config.keyCodes可以自定义按键修饰符别名：

Vue.config.keyCodes = {
  f1: 112,
  mediaPlayPause: 179
}

之后就可以使用@keyup.f1这样的自定义修饰符。

事件对象访问

在方法中可以通过$event访问原生事件对象，获取按键信息：

methods: {
  handleKeyDown(e) {
    if (e.key === 'ArrowUp') {
      // 上箭头键处理
    }
  }
}

全局键盘监听

对于全局键盘事件，可以在生命周期钩子中添加监听：

mounted() {
  window.addEventListener('keyup', this.handleGlobalKey)
},
beforeDestroy() {
  window.removeEventListener('keyup', this.handleGlobalKey)
}

第三方库集成

对于复杂键盘操作，可以考虑使用vue-shortkey等第三方库：

import VueShortkey from 'vue-shortkey'
Vue.use(VueShortkey)

<button v-shortkey="['ctrl', 's']" @shortkey="save">保存</button>