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

sunbyte2025-05-22 18:05

📅 我们继续 50 个小项目挑战！------ Hidden Search Widget 组件

仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/

✨ 组件目标

点击按钮展开隐藏的搜索框
再次点击按钮收起搜索框

🧱 技术实现点

Vue3 的响应式状态管理 ref
TailwindCSS 的过渡动画与布局类
条件样式绑定 :class 实现动态样式

🔧 HiddenSearchWidget.vue 组件实现

html 复制代码

<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 添加组件预览常量：

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 中添加路由选项：

js 复制代码

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

🚀 小结

本组件通过 Vue3 的响应式状态管理和 TailwindCSS 的实用工具类，实现了一个简洁的隐藏搜索框交互效果。

使用 ref 管理组件状态
利用条件样式绑定动态控制元素样式
应用 TailwindCSS 的过渡动画类提升用户体验

📅 明日预告：Blurry Loading！实现模糊加载效果。

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