📅 我们继续 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 interval

onMounted(() => {
  interval = setInterval(() => {
    if (loading.value < 100) {
      loading.value += 2
      blurPx.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！实现滚动动画组件。