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

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

✨ 组件目标

  • 点击按钮展开隐藏的搜索框

  • 再次点击按钮收起搜索框

🧱 技术实现点

  • 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!实现模糊加载效果。

每天造一个轮子,码力暴涨不是梦!🚀

相关推荐
float_六七24 分钟前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang030135 分钟前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati1 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro1 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录1 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录1 小时前
内存泄漏的“隐形杀手”
前端·性能优化
摸鱼仙人~1 小时前
HttpServletRequest深度解析:Java Web开发的核心组件
java·开发语言·前端
索西引擎2 小时前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack
ZzMemory2 小时前
一文搞懂前端开发必备的导入导出方式
前端·面试·前端工程化
Stark_Tony2 小时前
SystemUI开发
前端