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

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

相关推荐
涛哥码咖4 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖15 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水36 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐43 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669132 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端