50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Blurry Loading (毛玻璃加载)

📅 我们继续 50 个小项目挑战!------ Blurry Loading 组件


✨ 组件目标

  • 实现一个加载进度条,随着加载进度的增加,背景图像逐渐从模糊变清晰

  • 展示一个百分比数字,表示当前的加载进度

  • 整个过程无需外部库,完全依赖 Vue3 和 Tailwind CSS


🧱 技术实现点

  • Vue3 的响应式状态管理(ref)

  • 使用 onMounted 和 onBeforeUnmount 生命周期钩子管理定时器

  • Tailwind CSS 的 absolute、inset-0、bg-cover、bg-center 等布局类

  • 动态绑定内联样式,实现模糊效果的渐变

🔧 BlurryLoading.vue 组件实现

html 复制代码
<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 添加组件预览常量:

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 中添加路由选项:

js 复制代码
{
  path: '/BlurryLoading',
  name: 'BlurryLoading',
  component: () => import('@/projects/BlurryLoading.vue')
}

🚀 小结

这个组件展示了如何结合 Vue3 的响应式特性和 Tailwind CSS 的实用工具类,实现一个动态的加载效果。通过动态调整背景图像的模糊程度,提升了用户体验。

📅 明日预告:Scroll Animation!实现滚动动画组件。

相关推荐
想要学好前端的阿毛1 分钟前
React状态管理库 -- Redux篇
前端
拾光拾趣录2 分钟前
前端宏(微)任务 | 从“为什么我的代码不按顺序执行”说起
前端·javascript
林太白6 分钟前
NestJS-菜单模块
前端·后端·nestjs
程序员ys7 分钟前
微前端(What)
前端·架构
狗都不学爬虫_8 分钟前
JS逆向 - (国外)SHEIN站 - 请求头(armorToken、Anti-in)
javascript·python·ajax·网络爬虫·wasm
用户7974761127310 分钟前
Mysql RR事务隔离级别引发的生产Bug,你中招了吗?
前端
Mintopia11 分钟前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
JarvanMo21 分钟前
Dart & Flutter DevTools 扩展
前端
yuko093123 分钟前
【手机验证码】手机号格式化光标异常问题
前端
原生高钙23 分钟前
高性能前端埋点上报系统的架构与实现
前端·面试