50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | BackgroundSlider（背景滑块）
📅 我们继续 50 个小项目挑战！—— BackgroundSlider组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的 Composition API 和 <script setup> 语法结合 TailwindCSS 构建一个全屏、背景模糊变暗、中间高亮显示的图片轮播组件。用户可以通过左右按钮切换图片，并带有缩放动画效果。
🎯 组件目标
- 展示一组全屏背景图
- 每张图中央有“高亮”展示区域
- 支持左右按钮切换图片
- 添加缩放动画提升视觉体验
- 使用 TailwindCSS 快速构建现代 UI 界面
⚙️ 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 Composition API (<script setup>) | 使用响应式变量管理组件状态 |
ref 响应式变量 | 控制当前图片索引与动画状态 |
@click 事件绑定 | 切换图片逻辑 |
:class 和 :style 动态绑定 | 控制背景图和动画效果 |
| TailwindCSS 过渡与动画 | 构建美观的过渡动画 |
@transitionend 事件监听 | 监听动画结束以控制缩放重置 |
🧱 组件实现
模板结构 <template>
<template><div class="relative h-screen overflow-hidden text-white"><!-- 背景图片变暗效果 --><divclass="absolute inset-0 origin-center bg-cover bg-center brightness-50 transition-transform duration-500 ease-in-out":class="imageList[currentIndex].className":style="{ transform: isAnimating ? 'scale(1.2)' : 'scale(1)' }"@transitionend="isAnimating = false"></div><!-- 中间亮框 --><div class="absolute inset-0 flex items-center justify-center"><divclass="relative h-3/4 w-3/4 bg-cover bg-center brightness-100":class="imageList[currentIndex].className"></div></div><!-- 切换按钮 --><button@click="prevImage"class="absolute top-1/2 left-4 -translate-y-1/2 rounded-full bg-white/30 p-4 text-white transition-all hover:bg-white/50"><</button><button@click="nextImage"class="absolute top-1/2 right-4 -translate-y-1/2 rounded-full bg-white/30 p-4 text-white transition-all hover:bg-white/50">></button></div>
</template>
脚本逻辑 <script setup>
<script setup>
import { ref } from 'vue'const currentIndex = ref(0)
const isAnimating = ref(false)const imageList = ref([{id: 1,className:'bg-[url(https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80)]',},{id: 2,className:'bg-[url(https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80)]',},{id: 3,className:'bg-[url(https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80)]',},
])const nextImage = () => {isAnimating.value = truecurrentIndex.value = (currentIndex.value + 1) % imageList.value.length
}const prevImage = () => {isAnimating.value = truecurrentIndex.value =(currentIndex.value - 1 + imageList.value.length) % imageList.value.length
}
</script>
🔍 重点效果实现
✅ 图片切换逻辑
通过 currentIndex 来决定当前显示哪一张图片：
const nextImage = () => {isAnimating.value = truecurrentIndex.value = (currentIndex.value + 1) % imageList.value.length
}
使用模运算 % 来循环数组。
💡 缩放动画实现
我们为背景图添加了动态 transform 样式和 transition：
:style="{ transform: isAnimating ? 'scale(1.2)' : 'scale(1)' }"
并在点击按钮时设置 isAnimating = true，动画结束后自动恢复。
同时监听 @transitionend 来关闭动画标志：
@transitionend="isAnimating = false"
🖼️ 图片背景设置
每张图片都使用 Tailwind 的 bg-[url(...)] 类来设置背景图路径：
className: 'bg-[url(https://...)]'
这种方式非常灵活，且无需额外引入图片资源。
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
h-screen, overflow-hidden | 全屏高度并隐藏溢出内容 |
absolute inset-0 | 铺满整个父容器 |
bg-cover, bg-center | 图片自适应铺满并居中 |
brightness-50, brightness-100 | 调整明暗对比度 |
origin-center | 设置缩放中心点 |
transition-transform duration-500 ease-in-out | 添加平滑的缩放动画 |
flex items-center justify-center | 居中布局 |
hover:bg-white/50 | 鼠标悬停改变透明度 |
rounded-full | 圆形按钮样式 |
这些 Tailwind 工具类帮助我们快速构建了一个极具视觉冲击力的全屏轮播组件。
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 18,title: 'Background Slider',image: 'https://50projects50days.com/img/projects-img/18-background-slider.png',link: 'BackgroundSlider',},
router/index.js 中添加路由选项：
{path: '/BackgroundSlider',name: 'BackgroundSlider',component: () => import('@/projects/BackgroundSlider.vue'),},
🏁 总结
涵盖了 Vue 3 的响应式系统、动画控制、按钮交互以及 TailwindCSS 的强大样式能力。它非常适合用于网站主页、作品集展示、产品介绍等需要突出视觉表现的场景。
你可以进一步扩展的功能包括：
- 自动播放功能（定时切换）
- 添加底部导航圆点指示器
- 支持键盘左右键切换
- 支持移动端滑动手势切换
- 支持主题切换（暗色/亮色）
👉 下一篇，我们将完成ThemeClock组件，非常简约的始终组件可以切换主题以及显示时间。🚀