vue如何实现键盘事件

监听键盘事件的方法

在Vue中可以通过v-on指令或@简写来监听键盘事件。常见的键盘事件包括keydown、keyup和keypress。

<template>
  <input 
    @keydown="handleKeyDown" 
    @keyup="handleKeyUp"
    @keypress="handleKeyPress"
  />
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      console.log('键按下:', event.key);
    },
    handleKeyUp(event) {
      console.log('键释放:', event.key);
    },
    handleKeyPress(event) {
      console.log('按键:', event.key);
    }
  }
}
</script>

使用按键修饰符

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

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

自定义按键修饰符

可以通过Vue.config.keyCodes对象添加自定义按键修饰符。

Vue.config.keyCodes = {
  f1: 112,
  upArrow: 38
}

<input @keyup.f1="showHelp" />
<input @keyup.upArrow="navigateUp" />

系统修饰键组合

对于Ctrl、Alt、Shift等系统修饰键，可以使用组合监听。

<input @keyup.ctrl.enter="submitForm" />
<div @click.ctrl="doSomething">按住Ctrl点击</div>

事件对象的使用

键盘事件处理函数会自动接收原生DOM事件对象，可以访问以下常用属性：

• event.key：按下的键名
• event.keyCode：按键代码
• event.target：事件目标元素
• event.preventDefault()：阻止默认行为

methods: {
  handleKeyDown(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault();
      this.submitForm();
    }
  }
}

全局键盘事件监听

需要在组件销毁时移除监听器以避免内存泄漏。

export default {
  mounted() {
    window.addEventListener('keydown', this.handleGlobalKeyDown);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleGlobalKeyDown);
  },
  methods: {
    handleGlobalKeyDown(event) {
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        this.saveDocument();
      }
    }
  }
}

第三方库的使用

对于复杂的键盘处理，可以考虑使用vue-shortkey等第三方库。

安装：

npm install vue-shortkey

使用：

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

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