我们继续 50 个小项目挑战!—— EventKeyCodes
组件
仓库地址:https://github.com/SunACong/50-vue-projects
项目预览地址:https://50-vue-projects.vercel.app/
使用 Vue 3 的 语法结合 TailwindCSS 构建一个简单的键盘监听组件,展示用户按下任意键时的
keyCode
、key
和 code
信息。
技术点 | 描述 |
---|---|
Vue 3 Composition API ( ) |
使用响应式变量管理组件状态 |
事件监听 (window.addEventListener ) |
监听全局的 keydown 事件 |
条件渲染 (v-if , v-else ) |
判断是否已按下按键以切换视图 |
TailwindCSS 响应式布局 | 使用类名快速构建美观的 UI |
<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 keyCodediv>
<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>
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
中移除监听器,避免内存泄漏。useKeyboardEvent()
。通过 v-if
和 v-else
控制是否已经按下键盘:
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
})
类名 | 作用 |
---|---|
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面板!