vue键盘实现

Vue 键盘事件实现

在 Vue 中实现键盘事件监听可以通过 v-on 指令或 @ 简写绑定键盘事件。以下是常见的实现方法：

监听按键事件

<template>
  <input @keydown="handleKeyDown" />
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Enter') {
        console.log('Enter key pressed');
      }
    }
  }
}
</script>

使用按键修饰符 Vue 提供内置按键修饰符，简化特定按键的判断：

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

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

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

使用方式：

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

组合键监听

通过事件修饰符实现组合键功能：

<input @keyup.ctrl.enter="submitForm" />
<input @keydown.alt.67="copyContent" />

全局键盘监听

在组件生命周期中挂载全局事件：

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

常用按键标识

• 字母键：直接使用 event.key（如 'a'、'b'）
• 功能键：'Enter'、'Escape'、'Tab'、'Space'
• 方向键：'ArrowUp'、'ArrowDown'、'ArrowLeft'、'ArrowRight'
• 控制键：通过 event.ctrlKey、event.shiftKey 等布尔属性判断

注意事项

• 移动端键盘事件可能表现不一致，需额外测试
• 避免过度使用全局键盘监听，可能引发事件冲突
• 在表单元素中，注意区分 keydown 和 keypress 事件差异