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 = false
    handleKeyDown.value.keyCode = event.keyCode
    handleKeyDown.value.key = event.key
    handleKeyDown.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 = false
    handleKeyDown.value.keyCode = event.keyCode
    handleKeyDown.value.key = event.key
    handleKeyDown.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面板！🚀