当前位置：首页 > VUE

vue实现键盘操作

2026-02-11 08:16:18VUE

监听键盘事件

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

<template>
  <input @keyup.enter="handleEnter" />
</template>

<script>
export default {
  methods: {
    handleEnter() {
      console.log('Enter key pressed')
    }
  }
}
</script>

使用按键修饰符

Vue提供了一系列按键修饰符，可以直接绑定特定按键：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

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

自定义按键修饰符

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

Vue.config.keyCodes = {
  f1: 112,
  f2: 113,
  // ...
}

然后就可以在模板中使用：

vue实现键盘操作

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

系统修饰键

对于系统修饰键（如Ctrl、Alt、Shift、Meta），可以使用以下修饰符：

.ctrl
.alt
.shift
.meta

<div @click.ctrl="doSomething">按住Ctrl点击我</div>

组合按键监听

可以组合使用修饰符来监听复杂按键组合：

<input @keyup.ctrl.enter="submitForm" />

全局键盘事件

如果需要监听全局键盘事件，可以在生命周期钩子中添加和移除事件监听：

vue实现键盘操作

export default {
  mounted() {
    window.addEventListener('keydown', this.handleGlobalKey)
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleGlobalKey)
  },
  methods: {
    handleGlobalKey(e) {
      if (e.key === 'Escape') {
        this.closeModal()
      }
    }
  }
}

处理键盘导航

实现键盘导航功能（如上下箭头选择项目）：

methods: {
  handleKeyDown(e) {
    switch(e.key) {
      case 'ArrowUp':
        this.selectPrevItem()
        break
      case 'ArrowDown':
        this.selectNextItem()
        break
      case 'Enter':
        this.confirmSelection()
        break
    }
  }
}

第三方库支持

对于更复杂的键盘操作，可以考虑使用专门库：

vue-hotkey：提供声明式热键绑定
keymaster：简单的键盘快捷键库
mousetrap：功能丰富的键盘快捷键库

安装和使用示例（以vue-hotkey为例）：

import VueHotkey from 'vue-hotkey'
Vue.use(VueHotkey)

// 在组件中使用
export default {
  directives: {
    hotkey: VueHotkey.directive
  },
  hotkeys: {
    'ctrl+s': 'saveData'
  },
  methods: {
    saveData() {
      // 保存逻辑
    }
  }
}