50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Hoverboard（悬浮滑板组件）

📅 我们继续 50 个小项目挑战！—— Hoverboard组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

---

使用 Vue 3 的 Composition API 和 Tailwind CSS 实现一个有趣的交互式动画组件：当鼠标悬停在每个小方块上时，它会动态改变颜色，并带有发光效果；当鼠标移出后，颜色会平滑地恢复原状。这个组件非常适合用于创意页面、个人主页或交互式 UI 设计中。

---

🎯 应用目标

• 使用 Vue 3 Composition API 创建动态组件
• 利用 Tailwind CSS 快速构建布局和样式
• 实现鼠标悬停时的动态颜色变化和动画效果
• 使用 @mouseenter 和 @mouseleave 实现交互响应
• 支持灵活配置小方块的数量

---

⚙️ 技术实现点

技术点 描述 Vue 3 使用 ref 和 computed 创建响应式数据 动态生成方块 使用 Array.from 动态生成指定数量的小方块 随机颜色生成 通过 getRandomColor 方法生成随机十六进制颜色 鼠标事件绑定 使用 @mouseenter 和 @mouseleave 触发动画 Tailwind CSS 构建简洁美观的布局与过渡效果

---

🧱 组件实现

模板结构

<template> <div class=\"hoverboard-container flex min-h-screen items-center justify-center\"> <div class=\"hoverboard flex w-[calc((15px+2px*2)*10)] flex-wrap items-start justify-start overflow-hidden\"> <div v-for=\"(item, index) in squares\" :key=\"index\" class=\"square m-px h-3 w-3 bg-[#1d1d1d] shadow-[0_0_2px_#000] transition-all duration-500 ease-in-out\" @mouseenter=\"changeColor($event)\" @mouseleave=\"resetColor($event)\"></div> </div> </div></template>

模板部分构建了一个居中的容器，并在其中动态生成多个小方块。每个方块都绑定了鼠标事件，用于实现动态颜色变化和动画效果。

---

脚本逻辑

<script setup>import { ref, computed } from \'vue\'// 生成 30 * 3 = 90 个小方块const squares = computed(() => Array.from({ length: 30 * 3 }, (_, i) => i))// 随机颜色生成函数const getRandomColor = () => { const hexChars = \'0123456789ABCDEF\' let color = \'#\' for (let i = 0; i < 6; i++) { color += hexChars[Math.floor(Math.random() * 16)] } return color}// 鼠标悬停时改变颜色const changeColor = (e) => { const color = getRandomColor() e.target.style.backgroundColor = color e.target.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`}// 鼠标离开后恢复颜色const resetColor = (e) => { setTimeout(() => { e.target.style.backgroundColor = \'#1d1d1d\' e.target.style.boxShadow = \'0 0 2px #000\' }, 500)}</script>

脚本部分定义了以下核心功能：

• 动态生成指定数量的小方块（30列 × 3行）
• 随机颜色生成函数 getRandomColor
• 鼠标悬停时调用 changeColor 改变背景色和阴影
• 鼠标移出时调用 resetColor 恢复初始状态

---

Tailwind CSS 样式重点

类名 作用 hoverboard-container 设置页面最小高度并垂直水平居中 flex 使用 Flex 布局进行对齐 min-h-screen 设置容器最小高度为视口高度 hoverboard 容器布局，使用 flex-wrap 让小方块自动换行 w-[calc((15px+2px*2)*10)] 动态计算容器宽度，确保小方块排列整齐 square 每个小方块的基本样式 h-3 w-3 设置小方块大小为 12px × 12px bg-[#1d1d1d] 设置初始背景颜色 shadow-[0_0_2px_#000] 设置初始阴影 transition-all duration-500 ease-in-out 添加颜色和阴影的过渡动画 m-px 添加 1px 的外边距，防止方块紧贴在一起

---

🔍 关键功能解析

✅ 动态生成小方块

通过 Array.from 创建一个指定长度的数组，并在模板中使用 v-for 渲染出对应数量的小方块。你可以通过修改 30 * 3 的值来调整行数和列数。

✅ 鼠标事件绑定

• @mouseenter：鼠标进入时触发颜色变化
• @mouseleave：鼠标离开时触发颜色恢复

✅ 动态颜色生成

getRandomColor 方法通过随机选取十六进制字符，生成一个随机颜色值，用于每次悬停时的背景色和阴影效果。

✅ 动画过渡效果

使用 transition-all duration-500 ease-in-out 实现颜色和阴影的平滑过渡，让动画看起来更自然。

---

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{ id: 36, title: \'Hoverboard\', image: \'https://50projects50days.com/img/projects-img/36-hoverboard.png\', link: \'Hoverboard\', },

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

{ path: \'/Hoverboard\', name: \'Hoverboard\', component: () => import(\'@/projects/Hoverboard.vue\'), },

---

🏁 总结

你可以基于此组件进一步扩展以下功能：

• ✅ 点击生成颜色：将悬停改为点击事件，手动触发颜色变化
• ✅ 渐变色动画：使用 CSS 渐变色实现更复杂的动画效果
• ✅ 响应式布局：根据屏幕宽度动态调整小方块行列数

---

👉 下一篇，我们将完成Poekdex组件，实现一个好玩儿的宝可梦图鉴组件。🚀

感谢阅读，欢迎点赞、收藏和分享 😊

上海房产律师咨询