vue键盘实现
Vue 键盘事件实现方法
在Vue中实现键盘事件监听可以通过多种方式完成，包括直接绑定原生事件、使用修饰符或第三方库。以下是常见的实现方法：
1. 使用v-on指令绑定键盘事件
通过v-on或简写@直接绑定keydown、keyup等原生事件：
<template>
<input @keyup.enter="handleEnter" @keydown.space="handleSpace">
</template>
<script>
export default {
methods: {
handleEnter() {
console.log('Enter键被按下');
},
handleSpace() {
console.log('空格键被按下');
}
}
}
</script>2. 使用按键修饰符
Vue提供常用按键的别名修饰符：
.enter.tab.delete.esc.space.up.down.left.right
<input @keyup.esc="cancelInput">3. 自定义按键修饰符
在全局或组件内定义自定义按键别名：
// 全局配置
Vue.config.keyCodes = {
f1: 112,
mediaPlayPause: 179
}
// 使用
<input @keyup.f1="showHelp">4. 系统修饰键组合
监听组合键操作（如Ctrl+Click）：
<input @keyup.ctrl.enter="submitForm">
<div @click.ctrl="doSomething">Ctrl+Click me</div>5. 非输入元素监听
通过.native修饰符在非表单元素上监听：
<div @keyup.enter.native="handleEnter">Press Enter</div>6. 精确控制修饰符
使用.exact修饰符精确匹配按键组合：
<button @click.ctrl.exact="onCtrlClick">仅Ctrl点击触发</button>7. 全局键盘监听
在mounted生命周期中添加全局监听：
mounted() {
window.addEventListener('keyup', this.handleKeyUp);
},
beforeDestroy() {
window.removeEventListener('keyup', this.handleKeyUp);
},
methods: {
handleKeyUp(e) {
if (e.key === 'Escape') this.closeModal();
}
}8. 使用第三方库
对于复杂快捷键管理，可考虑vue-shortkey等库：
import VueShortkey from 'vue-shortkey';
Vue.use(VueShortkey);
// 使用示例
<button v-shortkey="['ctrl', 's']" @shortkey="save">Save</button>注意事项
- 移动端键盘事件可能表现不一致，需额外测试
- 避免在全局监听中执行耗时操作
- 组件销毁时务必移除事件监听防止内存泄漏
- IE兼容性问题需考虑
keyCode与key属性的差异
以上方法可根据实际场景组合使用，简单交互推荐使用修饰符，复杂快捷键系统建议采用专用库实现。
