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 构建一个简单的键盘监听组件,展示用户按下任意键时的 keyCodekeycode 信息。

🎯 组件目标

  • 监听用户的键盘输入事件。
  • 展示按下的键码(keyCode)、字符(key)和物理键位(code)。
  • 使用 TailwindCSS 美化 UI,保持简洁现代的设计风格。
  • 提供清晰的交互反馈:初始提示信息与按键后的数据展示切换。

⚙️ 技术实现点

技术点 描述
Vue 3 Composition API (<script setup>) 使用响应式变量管理组件状态
事件监听 (window.addEventListener) 监听全局的 keydown 事件
条件渲染 (v-if, v-else) 判断是否已按下按键以切换视图
TailwindCSS 响应式布局 使用类名快速构建美观的 UI

🧱 组件实现

模板结构 <template>

html 复制代码
<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>

js 复制代码
<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-ifv-else 控制是否已经按下键盘:

  • 初始状态显示"Press any key..."
  • 一旦触发 keydown 事件,隐藏提示并展示三个包含键值的按钮。

键盘事件监听

使用原生 JavaScript 的 window.addEventListener('keydown') 来监听用户按键,并将返回的 keyCodekeycode 更新到响应式对象 handleKeyDown 中,从而触发模板更新。

js 复制代码
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 添加组件预览常量:

js 复制代码
{
        id: 11,
        title: 'Event KeyCodes',
        image: 'https://50projects50days.com/img/projects-img/11-event-keycodes.png',
        link: 'EventKeyCodes',
    },

router/index.js 中添加路由选项:

js 复制代码
{
        path: '/EventKeyCodes',
        name: 'EventKeyCodes',
        component: () => import('@/projects/EventKeyCodes.vue'),
    },

🏁 总结

涵盖 Vue 3 的响应式系统、事件监听机制以及 TailwindCSS 的实用样式类。它不仅是一个教学示例,也可以作为开发调试工具的一部分,用于快速查看键盘事件的数据。


👉 下一篇,我们将完成 FAQ Collapse 组件,一个现代化的折叠Q&A面板!🚀

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端