国内欣赏电商设计的网站免费模式营销案例
键盘事件是Web交互的重要组成部分，本文将详细介绍如何在Vue 3中使用组合式API和<script setup>语法糖处理键盘事件。
一、JavaScript 原生键盘事件
JavaScript 提供了三种主要的键盘事件：
1. 键盘事件类型
- keydown：按下键盘按键时触发（按住会连续触发）
- keyup：释放键盘按键时触发
- keypress（已废弃，不推荐使用）：按下产生字符的按键时触发
document.addEventListener('keydown', function(event) {console.log('键按下:', event.key);
});document.addEventListener('keyup', function(event) {console.log('键释放:', event.key);
});
二、Vue 3中的键盘事件处理
1. 基本用法（组合式API）
<script setup>
import { ref } from 'vue'const inputValue = ref('')const handleKeyDown = (event) => {console.log('键按下:', event.key)
}const handleKeyUp = (event) => {console.log('键释放:', event.key)
}
</script><template><input v-model="inputValue"@keydown="handleKeyDown"@keyup="handleKeyUp"/>
</template>
2. 事件修饰符
Vue 3提供了方便的键盘事件修饰符：
<script setup>
const submitForm = () => {console.log('回车提交表单')
}const handleCtrlEnter = () => {console.log('Ctrl+Enter 组合键')
}
</script><template><!-- 回车键触发 --><input @keyup.enter="submitForm"><!-- Ctrl+Enter 组合键触发 --><input @keyup.ctrl.enter="handleCtrlEnter"><!-- 精确匹配 - 只有Ctrl键按下时触发 --><input @keyup.exact.ctrl="handleExactCtrl">
</template>
3. 常用按键修饰符
Vue 3内置了以下按键修饰符：
.enter.tab.delete(包含Delete和Backspace).esc.space.up.down.left.right
三、实用场景示例
1. 搜索框回车搜索
<script setup>
import { ref } from 'vue'const searchText = ref('')const search = () => {console.log('执行搜索:', searchText.value)// 这里添加搜索逻辑
}
</script><template><inputv-model="searchText"@keyup.enter="search"placeholder="输入关键词后按回车搜索"/>
</template>
2. 全局快捷键实现
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'const saveContent = () => {console.log('保存内容')
}const closeModal = () => {console.log('关闭模态框')
}const handleGlobalKeyDown = (event) => {if (event.ctrlKey && event.key === 's') {event.preventDefault()saveContent()}if (event.key === 'Escape') {closeModal()}
}// 组件挂载时添加监听
onMounted(() => {window.addEventListener('keydown', handleGlobalKeyDown)
})// 组件卸载前移除监听
onBeforeUnmount(() => {window.removeEventListener('keydown', handleGlobalKeyDown)
})
</script>
3. 游戏控制示例
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'const playerPosition = ref({ x: 0, y: 0 })const handleGameControl = (event) => {switch(event.key) {case 'ArrowUp':playerPosition.value.y--breakcase 'ArrowDown':playerPosition.value.y++breakcase 'ArrowLeft':playerPosition.value.x--breakcase 'ArrowRight':playerPosition.value.x++break}console.log('当前位置:', playerPosition.value)
}onMounted(() => {window.addEventListener('keydown', handleGameControl)
})onBeforeUnmount(() => {window.removeEventListener('keydown', handleGameControl)
})
</script><template><div><p>玩家位置: X={{ playerPosition.x }}, Y={{ playerPosition.y }}</p><p>使用方向键移动</p></div>
</template>
四、高级技巧
1. 自定义按键修饰符
在Vue 3中，可以通过app.config.globalProperties添加全局按键修饰符：
// main.js
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.config.globalProperties.$keyCodes = {f1: 112,mediaPlayPause: 179
}app.mount('#app')
然后在组件中使用：
<script setup>
import { getCurrentInstance } from 'vue'const { proxy } = getCurrentInstance()const showHelp = () => {console.log('显示帮助')
}
</script><template><input @keyup.[proxy.$keyCodes.f1]="showHelp">
</template>
2. 组合式函数封装
可以将键盘逻辑封装为可复用的组合式函数：
// useKeyboard.js
import { onMounted, onBeforeUnmount } from 'vue'export function useKeyboardShortcut(key, callback) {const handler = (event) => {if (event.key === key) {callback(event)}}onMounted(() => {window.addEventListener('keydown', handler)})onBeforeUnmount(() => {window.removeEventListener('keydown', handler)})
}
在组件中使用：
<script setup>
import { useKeyboardShortcut } from './useKeyboard'useKeyboardShortcut('Escape', () => {console.log('ESC键被按下')
})
</script>
五、注意事项
- 移动端兼容性：移动设备键盘事件可能有不同表现
- 输入法问题：使用输入法时，keydown/keyup事件可能不符合预期
- 性能优化：频繁触发的keydown事件中避免复杂逻辑
- 事件清理：全局事件务必在组件卸载时移除监听器
- 修饰键检测：使用
event.ctrlKey/event.shiftKey等检测修饰键状态 - 事件冒泡：注意键盘事件会冒泡，可使用
.stop修饰符阻止
六、总结
Vue 3的组合式API和<script setup>语法糖为键盘事件处理提供了更简洁、更灵活的方式：
- 使用
@keydown和@keyup绑定事件处理函数 - 利用内置修饰符简化常见按键检测
- 通过组合式函数封装可复用的键盘逻辑
- 注意生命周期管理，及时清理事件监听
- 考虑封装自定义键盘逻辑hook提高代码复用性
通过合理使用这些特性，可以构建出响应迅速、交互丰富的Vue 3应用。
希望本指南能帮助你更好地在Vue 3项目中处理键盘事件！
创作不易，如果您都看到这里了，可以给我一个点赞、收藏并关注一下么？您的支持与喜爱是激励我创作的最大动力！
如果内容有误请及时联系我进行修改！