vue实现键盘操作
Vue 键盘事件实现方法
绑定原生键盘事件
在 Vue 模板中直接使用 @keydown、@keyup 等原生事件监听
<input @keydown.enter="handleEnter" @keyup.space="handleSpace">常用按键修饰符
.enter.tab.delete.esc.space.up.down.left.right
自定义按键修饰符
通过 Vue.config.keyCodes 添加自定义按键码
Vue.config.keyCodes = {
f1: 112,
mediaPlayPause: 179
}组合键实现 使用系统修饰键实现组合键功能
<input @keydown.ctrl.67="handleCopy">
<!-- Ctrl + C -->全局键盘监听 在组件生命周期中注册/移除全局事件
mounted() {
window.addEventListener('keydown', this.handleKeyDown)
},
beforeDestroy() {
window.removeEventListener('keydown', this.handleKeyDown)
}第三方库支持
使用 vue-shortkey 等插件增强功能
import VueShortkey from 'vue-shortkey'
Vue.use(VueShortkey)移动端兼容处理 针对移动设备添加 touch 事件兼容
<div
@keydown.enter="submit"
@touchstart="handleTouchStart"
@touchend="handleTouchEnd"
></div>性能优化建议
- 避免在频繁触发的事件中执行复杂操作
- 使用防抖/节流控制事件触发频率
- 及时移除不需要的事件监听
调试技巧
通过 event.key 和 event.keyCode 查看按键信息
methods: {
handleKeyDown(event) {
console.log('Key pressed:', event.key, 'Code:', event.keyCode)
}
}
