50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Expanding Cards （展开式卡片）
📅 我们继续 50 个小项目挑战！—— Expanding Cards 组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
✨ 组件目标
- 一组横向排列的背景卡片
- 点击卡片后，其展开至主要区域，其他卡片收缩
- 显示当前卡片的标题，其他隐藏
🧱 技术实现点
- Vue3 的响应式状态
ref v-for渲染卡片列表- TailwindCSS
flex,transition,bg-cover,rounded,bg-[url]等核心工具类 - 条件样式绑定
:class
🔧 ExpandingCards.vue 组件实现
<template><div class="flex min-h-screen justify-center p-20"><divv-for="item in imagList":key="item.id"@click="current = item.id":class="['relative m-2 flex-1/12 cursor-pointer rounded-[4vw] bg-cover bg-center bg-no-repeat font-mono text-2xl text-white transition-all duration-500 ease-in-out',item.className,current === item.id ? 'flex-2/3' : 'flex-1/12',]"><h3:class="['absolute bottom-5 left-15 transition-all duration-500 ease-in-out',current === item.id ? 'opacity-100' : 'opacity-0',]">{{ item.title }}</h3></div></div>
</template><script setup>
import { ref } from 'vue'const current = ref(1)const imagList = [{id: 1,className:'bg-[url(https://images.unsplash.com/photo-1558979158-65a1eaa08691?auto=format&fit=crop&w=1350&q=80)]',title: 'Explore The World',},{id: 2,className:'bg-[url(https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?auto=format&fit=crop&w=1350&q=80)]',title: 'Wild Forest',},{id: 3,className:'bg-[url(https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1353&q=80)]',title: 'Sunny Beach',},{id: 4,className:'bg-[url(https://images.unsplash.com/photo-1551009175-8a68da93d5f9?auto=format&fit=crop&w=1351&q=80)]',title: 'City on Winter',},{id: 5,className:'bg-[url(https://images.unsplash.com/photo-1549880338-65ddcdfd017b?auto=format&fit=crop&w=1350&q=80)]',title: 'Mountains - Clouds',},
]
</script>
💡 TailwindCSS 样式重点讲解
| 类名 | 功能描述 |
|---|---|
flex-1/12, flex-2/3 | 自定义比例控制卡片展开宽度 |
bg-cover bg-center | 背景图片尺寸与居中展示 |
rounded-[4vw] | 圆角自定义为视口宽度 |
transition-all duration-500 | 平滑过渡效果 |
opacity-0 / opacity-100 | 控制标题显隐 |
🦌 常量定义 + 组件路由
constants/index.js添加组件预览常量
export const projectList = [{id: 1,title: 'Expanding Cards',image: 'https://50projects50days.com/img/projects-img/1-expanding-cards.png',link: 'ExpandingCards',}
]
router/index.js中router对象添加路由选项
{path: '/ExpandingCards',name: 'ExpandingCards',component: () => import('@/projects/ExpandingCards.vue')}
🚀 小结
这个组件展示了如何用非常少的代码和工具类实现炫酷 UI 效果。我们学会了：
- 使用
v-for构建动态组件结构 - 用
ref管理当前状态 - 动态绑定 class 实现动画和交互反馈
- 熟练使用 TailwindCSS v4 的实用工具类，提升开发效率
📅 明日预告：Progress Steps！实现步骤引导组件。
🧠 每天进步一点点，50 天后惊艳所有人！