当前位置：首页 > VUE

vue键盘实现

2026-01-08 00:04:36VUE

监听键盘事件

在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、.esc、.space、.up、.down、.left、.right。也可以使用按键码或自定义按键修饰符：

<input @keyup.13="submit" />  <!-- 使用按键码13(回车) -->
<input @keyup.page-down="onPageDown" />  <!-- 自定义修饰符 -->

系统修饰键

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

vue键盘实现

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!-- Alt + C -->
<input @keyup.alt.67="clear" />

自定义按键修饰符

可以通过config.keyCodes全局配置自定义按键修饰符：

Vue.config.keyCodes = {
  f1: 112,
  mediaPlayPause: 179,
  up: [38, 87]
}

处理组合键

监听组合键事件需要结合多个修饰符：

vue键盘实现

<input @keyup.ctrl.alt.67="handleCombo" />

全局键盘事件

在组件生命周期中注册和移除全局键盘事件：

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

第三方库

对于复杂的键盘交互，可以考虑使用第三方库如vue-shortkey或keymaster：

// 使用vue-shortkey
import Vue from 'vue'
import ShortKey from 'vue-shortkey'

Vue.use(ShortKey)

// 在组件中使用
<button v-shortkey="['ctrl', 'alt', 'o']" @shortkey="openFile">Open</button>