50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Form Wave（表单label波动效果）
📅 我们继续 50 个小项目挑战！—— FormWave组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
🎯 组件目标
构建一个美观、动态的登录表单，重点在于实现带有浮动标签（floating label）的输入框体验，提升交互感知和视觉效果，适合作为任何登录注册模块的基础模板。
🛠️ 技术实现点
- 使用 Vue3 +
<script setup>编写响应式逻辑。 - 使用 TailwindCSS 完全控制样式，特别是浮动文字的动画。
- 实现
focus/blur状态下标签文字的动画浮动效果。 - 使用
v-model实现双向绑定，结合focus状态精准控制浮动逻辑。
🧱 组件实现
<!-- 🌈 模板部分 Template -->
<template><div class="flex h-screen items-center justify-center bg-gray-800 text-gray-300"><div class="rounded-2xl bg-gray-500/60 p-12 text-center"><h1 class="text-4xl font-bold text-gray-300">Please Login</h1><form><!-- Email 输入框 --><div class="form-control relative mt-10 border-b-2 border-b-white"><inputclass="peer relative z-10 w-full bg-transparent py-3 text-white focus:border-sky-300 focus:outline-none"type="text"requiredv-model="emailValue"@focus="activeInput = 'email'"@blur="handleBlur('email')" /><label class="pointer-events-none absolute top-4 left-0"><!-- ✨ 字符级浮动动画 --><spanv-for="(letter, idx) in 'Email'.split('')":key="idx":class="['inline-block min-w-[5px] text-lg transition-all duration-300','transform-gpu',{'-translate-y-8 text-sky-300':activeInput === 'email' || emailValue,},]":style="{transitionDelay: `${idx * 50}ms`,transitionTimingFunction: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',}">{{ letter }}</span></label></div><!-- Password 输入框 --><div class="form-control relative mt-10 border-b-2 border-b-white"><inputclass="peer relative z-10 w-full bg-transparent py-3 text-white focus:border-sky-300 focus:outline-none"type="password"requiredv-model="passwordValue"@focus="activeInput = 'password'"@blur="handleBlur('password')" /><label class="pointer-events-none absolute top-4 left-0"><!-- ✨ 字符级浮动动画 --><spanv-for="(letter, idx) in 'Password'.split('')":key="idx":class="['inline-block min-w-[5px] text-lg transition-all duration-300','transform-gpu',{'-translate-y-8 text-sky-300':activeInput === 'password' || passwordValue,},]":style="{transitionDelay: `${idx * 50}ms`,transitionTimingFunction: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',}">{{ letter }}</span></label></div><!-- 登录按钮 --><buttonclass="mt-10 w-full rounded bg-blue-500 px-4 py-2 font-bold hover:bg-blue-600 focus:ring-2 focus:ring-blue-400 focus:outline-none"type="submit">Login</button><p class="mt-10">Don't have an account?<a href="#" class="text-blue-400 hover:underline">Register</a></p></form></div></div>
</template>🧩 重点效果实现
<!-- ⚙️ 脚本部分 Script -->
<script setup>
import { ref } from 'vue'// 输入值响应式变量
const emailValue = ref('')
const passwordValue = ref('')// 当前聚焦的输入项
const activeInput = ref(null)// 失焦逻辑：如果输入框为空，则取消浮动状态
const handleBlur = (inputName) => {if ((inputName === 'email' && !emailValue.value) ||(inputName === 'password' && !passwordValue.value)) {activeInput.value = null}
}
</script>
- 标签浮动是通过
translate-y配合activeInput或绑定值来实现的。 - 使用
transition-delay实现了字符级别的延迟动画，让文字一个个浮动。 - 利用
cubic-bezier定义自定义缓动函数，提升动画的弹性和自然感。
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
peer / relative z-10 | 确保 input 在 label 之上，供 label 状态判断使用 |
-translate-y-8 | 控制文字上浮距离 |
transition-delay | 实现文字一个个浮动的动画延迟 |
transform-gpu | 使用 GPU 加速动画，提高性能和流畅度 |
focus:outline-none / focus:ring-2 | 聚焦时视觉反馈 |
min-w-[5px] | 保证字符宽度一致，不会断行 |
🧾 常量定义 + 组件路由建议
constants/index.js 添加组件预览常量：
{id: 8,title: 'Form Wave',image: 'https://50projects50days.com/img/projects-img/8-form-wave.png',link: 'FormWave',},
router/index.js 中添加路由选项：
{path: '/FormWave',name: 'FormWave',component: () => import('@/projects/FormWave.vue'),},
路由守卫可后续扩展身份验证逻辑，跳转到注册或首页。
🧠 小结
完成了通用场景下的表单样式界面，可以为你以后的表单设计以及登录页面提供一些灵感进行参考！！！🚀
👉 下一篇，我们将完成声音组件 Sound Board组件，可以实现点击发出对应的声音！🚀