50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Hidden Search Widget （交互式搜索框）

📅 我们继续 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！实现模糊加载效果。

每天造一个轮子，码力暴涨不是梦！🚀