当前位置: 首页 > news >正文

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.jsrouter对象添加路由选项

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

🚀 小结

这个组件展示了如何用非常少的代码和工具类实现炫酷 UI 效果。我们学会了:

  • 使用 v-for 构建动态组件结构
  • ref 管理当前状态
  • 动态绑定 class 实现动画和交互反馈
  • 熟练使用 TailwindCSS v4 的实用工具类,提升开发效率

📅 明日预告:Progress Steps!实现步骤引导组件。


🧠 每天进步一点点,50 天后惊艳所有人!

http://www.dtcms.com/a/198133.html

相关文章:

  • 产品周围的几面墙
  • 大模型中的Token机制深度解析
  • [ctfshow web入门] web122
  • 安全漏洞频发,如何加强防护措施?
  • IntelliJ IDEA设置编码集
  • 普通用户的服务器连接与模型部署相关记录
  • 代码随想录算法训练营 Day49 图论Ⅰ 深度优先与广度优先
  • 基于 Zookeeper 部署 Kafka 集群
  • Linux系统:ext2文件系统的核心概念和结构
  • 什么是open BMC?
  • GO语言(一期)常用关键字总结
  • C++学习:六个月从基础到就业——C++17:结构化绑定
  • 数据治理进阶:精读62页数据治理体系建设文档【附全文阅读】
  • 二十一、案例特训专题4【数据库篇】
  • Vue3进行工程化项目,保姆级教学(编译软件:vscode)大部分编译平台适用
  • EmuEdit
  • JAVA EE(进阶)_进阶的开端
  • IS-IS 中间系统到中间系统
  • Java IO框架
  • 安卓端互动娱乐房卡系统调试实录:从UI到协议的万字深拆(第一章)
  • ADVB帧格式
  • 生产模式下react项目报错minified react error #130的问题
  • 学习黑客Active Directory 入门指南(三)
  • 《沙尘暴》观影记:当家庭成为人性的修罗场
  • React中巧妙使用异步组件Suspense优化页面性能。
  • 【Spring】核心机制:IOC与DI深度解析
  • 存内计算在AI推理中的落地挑战:从理论算力到实际吞吐量的鸿沟
  • 蓝桥杯19682 完全背包
  • 用户下单-01.需求分析和设计-接口设计
  • 【Linux网络编程】Socket编程-Socket理论入门