50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes（键盘码）
📅 我们继续 50 个小项目挑战！—— EventKeyCodes 组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的 <script setup> 语法结合 TailwindCSS 构建一个简单的键盘监听组件，展示用户按下任意键时的 keyCode、key 和 code 信息。
🎯 组件目标
- 监听用户的键盘输入事件。
- 展示按下的键码（keyCode）、字符（key）和物理键位（code）。
- 使用 TailwindCSS 美化 UI，保持简洁现代的设计风格。
- 提供清晰的交互反馈：初始提示信息与按键后的数据展示切换。
⚙️ 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 Composition API (<script setup>) | 使用响应式变量管理组件状态 |
事件监听 (window.addEventListener) | 监听全局的 keydown 事件 |
条件渲染 (v-if, v-else) | 判断是否已按下按键以切换视图 |
| TailwindCSS 响应式布局 | 使用类名快速构建美观的 UI |
🧱 组件实现
模板结构 <template>
<template><div class="flex h-screen items-center justify-center text-white"><div v-if="noPressKey" class="btn key border-2">Press any key to get the keyCode</div><div v-else class="flex gap-8 text-white"><div class="btn w-56 border-2 text-2xl">KeyCode: {{ handleKeyDown.keyCode }}</div><div class="btn w-56 border-2 text-2xl">Key: {{ handleKeyDown.key }}</div><div class="btn w-56 border-2 text-2xl">Code: {{ handleKeyDown.code }}</div></div></div>
</template>
脚本逻辑 <script setup>
<script setup>
import { ref } from 'vue'const noPressKey = ref(true)const handleKeyDown = ref({keyCode: 0,key: '',code: '',
})// 监听键盘事件，按下任意键时显示键码
window.addEventListener('keydown', (event) => {noPressKey.value = falsehandleKeyDown.value.keyCode = event.keyCodehandleKeyDown.value.key = event.keyhandleKeyDown.value.code = event.code
})
</script>
💡 注意事项：
- 由于
window.addEventListener是副作用操作，在生产环境中建议使用onMounted生命周期钩子来绑定事件，并在onUnmounted中移除监听器，避免内存泄漏。 - 可以进一步封装为可复用的自定义 Hook，例如
useKeyboardEvent()。
🔍 重点效果实现
动态切换视图
通过 v-if 和 v-else 控制是否已经按下键盘：
- 初始状态显示“Press any key…”
- 一旦触发
keydown事件，隐藏提示并展示三个包含键值的按钮。
键盘事件监听
使用原生 JavaScript 的 window.addEventListener('keydown') 来监听用户按键，并将返回的 keyCode、key、code 更新到响应式对象 handleKeyDown 中，从而触发模板更新。
window.addEventListener('keydown', (event) => {noPressKey.value = falsehandleKeyDown.value.keyCode = event.keyCodehandleKeyDown.value.key = event.keyhandleKeyDown.value.code = event.code
})
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
flex | 启用弹性盒子布局 |
h-screen | 高度为整个视口高度 |
items-center | 垂直居中对齐 |
justify-center | 水平居中对齐 |
text-white | 文字颜色为白色 |
border-2 | 边框宽度为 2px |
w-56 | 宽度为 8rem（即 224px） |
text-2xl | 字体大小为 1.5rem |
gap-8 | flex 子元素之间间隔为 2rem |
这些类名帮助我们快速构建出一个居中的响应式布局，并确保视觉上的一致性和美观性。
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 11,title: 'Event KeyCodes',image: 'https://50projects50days.com/img/projects-img/11-event-keycodes.png',link: 'EventKeyCodes',},
router/index.js 中添加路由选项：
{path: '/EventKeyCodes',name: 'EventKeyCodes',component: () => import('@/projects/EventKeyCodes.vue'),},
🏁 总结
涵盖 Vue 3 的响应式系统、事件监听机制以及 TailwindCSS 的实用样式类。它不仅是一个教学示例，也可以作为开发调试工具的一部分，用于快速查看键盘事件的数据。
👉 下一篇，我们将完成 FAQ Collapse 组件，一个现代化的折叠Q&A面板！🚀