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 分钟前
回顾vue中的Props与Attrs
前端·javascript·面试
Jerry37 分钟前
使用 Material 3 在 Compose 中设置主题
前端
耶啵奶膘43 分钟前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹1 小时前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
生擒小朵拉1 小时前
STM32添加库函数
java·javascript·stm32
tuokuac1 小时前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼1 小时前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少2 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.2 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者2 小时前
web 网页数据传输处理过程
前端