50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Blurry Loading （毛玻璃加载）
📅 我们继续 50 个小项目挑战！—— Blurry Loading 组件
-
仓库地址：https://github.com/SunACong/50-vue-projects
-
项目预览地址：https://50-vue-projects.vercel.app/
✨ 组件目标
-
实现一个加载进度条，随着加载进度的增加，背景图像逐渐从模糊变清晰
-
展示一个百分比数字，表示当前的加载进度
-
整个过程无需外部库，完全依赖 Vue3 和 Tailwind CSS
🧱 技术实现点
-
Vue3 的响应式状态管理（ref）
-
使用 onMounted 和 onBeforeUnmount 生命周期钩子管理定时器
-
Tailwind CSS 的 absolute、inset-0、bg-cover、bg-center 等布局类
-
动态绑定内联样式，实现模糊效果的渐变
🔧 BlurryLoading.vue 组件实现
<template><div class="relative h-screen w-screen"><div:style="{ filter: `blur(${blurPx}px)` }"class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?auto=format&fit=crop&w=2104&q=80')] bg-cover bg-center bg-no-repeat"></div><div class="absolute inset-0 flex items-center justify-center"><div class="text-5xl font-bold text-gray-300">{{ loading }}%</div></div></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'const loading = ref(0)
const blurPx = ref(30)let intervalonMounted(() => {interval = setInterval(() => {if (loading.value < 100) {loading.value += 2blurPx.value = 30 * (1 - loading.value / 100)} else {clearInterval(interval)}}, 30)
})onBeforeUnmount(() => {clearInterval(interval)
})
</script>⭐ 渐显效果
ref变量opacity，根据loading.value动态变化，随着加载进度的推进从0线性增长到1。- 配合
transition-opacity duration-500的 Tailwind 类，使背景图从完全透明渐显到完全不透明。 - 为任何元素设置
:style="{ opacity: xxx }"配合 Tailwind 的过渡类，都可以实现渐显。
💡 TailwindCSS 样式重点讲解
| 类名 | 功能描述 |
|---|---|
absolute inset-0 | 使元素绝对定位并填满父容器 |
bg-cover | 背景图像覆盖整个容器 |
bg-[url(xxx)] | 设置背景图像 |
bg-center | 背景图像居中显示 |
bg-no-repeat | 背景图像不重复 |
text-5xl | 设置字体大小为 5xl |
font-bold | 设置字体加粗 |
text-gray-300 | 设置字体颜色为灰色（300） |
🦌 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
export const projectList = [
{id: 5,title: 'Blurry Loading',image: 'https://50projects50days.com/img/projects-img/5-blurry-loading.png',link: 'BlurryLoading',}
]
router/index.js 中添加路由选项：
{path: '/BlurryLoading',name: 'BlurryLoading',component: () => import('@/projects/BlurryLoading.vue')
}
🚀 小结
这个组件展示了如何结合 Vue3 的响应式特性和 Tailwind CSS 的实用工具类，实现一个动态的加载效果。通过动态调整背景图像的模糊程度，提升了用户体验。
📅 明日预告：Scroll Animation！实现滚动动画组件。