📅 我们继续 50 个小项目挑战！—— Hidden Search Widget 组件
-
仓库地址：https://github.com/SunACong/50-vue-projects
-
项目预览地址：https://50-vue-projects.vercel.app/
✨ 组件目标
-
点击按钮展开隐藏的搜索框
-
再次点击按钮收起搜索框
🧱 技术实现点
-
Vue3 的响应式状态管理 ref
-
TailwindCSS 的过渡动画与布局类
-
条件样式绑定 :class 实现动态样式
🔧 HiddenSearchWidget.vue 组件实现
<template><div class="flex h-screen items-center justify-center text-white"><div class="flex h-14 border-2 bg-white"><input:class="['text-gray-500 outline-0 transition-all duration-300 ease-in-out',isOpen ? 'w-96 p-4' : 'w-0',]"placeholder="Search..."type="text" /><button class="h-14 w-14 text-3xl" @click="toggle">🔍</button></div></div>
</template><script setup>
import { ref } from 'vue'const isOpen = ref(false)const toggle = () => {isOpen.value = !isOpen.value
}
</script>
💡 TailwindCSS 样式重点讲解
| 类名 | 功能描述 |
|---|---|
transition-all duration-300 | 平滑过渡动画 |
w-96 / w-0 | 控制输入框宽度展开与收起 |
p-4 | 输入框内边距 |
outline-0 | 移除默认焦点样式 |
text-gray-500 | 输入文字颜色 |
h-14 w-14 | 按钮尺寸 |
🦌 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
export const projectList = [{id: 4,title: 'Hidden Search Widget',image: 'https://50projects50days.com/img/projects-img/4-hidden-search-widget.png',link: 'HiddenSearchWidget',}
]
router/index.js 中添加路由选项：
{path: '/HiddenSearch',name: 'HiddenSearch',component: () => import('@/projects/HiddenSearch.vue')
}
🚀 小结
本组件通过 Vue3 的响应式状态管理和 TailwindCSS 的实用工具类，实现了一个简洁的隐藏搜索框交互效果。
-
使用 ref 管理组件状态
-
利用条件样式绑定动态控制元素样式
-
应用 TailwindCSS 的过渡动画类提升用户体验
📅 明日预告：Blurry Loading！实现模糊加载效果。
每天造一个轮子，码力暴涨不是梦！🚀
——QuickStart)
