当前位置：首页 > VUE

vue键盘实现

2026-01-13 03:51:36VUE

Vue 键盘事件实现方法

在Vue中实现键盘事件可以通过v-on指令或@简写绑定键盘事件。常用的键盘事件包括keydown、keyup和keypress。

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

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

常用键盘修饰符

Vue提供了一系列键盘修饰符来简化特定按键的监听：

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

对于没有内置修饰符的按键，可以使用按键码（已弃用）或按键别名：

<input @keyup.page-down="onPageDown">

自定义按键修饰符

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

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

系统修饰键

对于系统修饰键（.ctrl、.alt、.shift、.meta），需要与其他键组合使用：

<input @keyup.alt.67="clear">

精确控制修饰键

使用.exact修饰符可以精确控制按键组合：

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

全局键盘事件监听

在组件生命周期中监听全局键盘事件：

vue键盘实现

mounted() {
  window.addEventListener('keyup', this.handleKeyUp);
},
beforeDestroy() {
  window.removeEventListener('keyup', this.handleKeyUp);
},
methods: {
  handleKeyUp(event) {
    if (event.key === 'Escape') {
      // 处理ESC键
    }
  }
}