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!实现滚动动画组件。

相关推荐
回忆哆啦没有A梦36 分钟前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__1 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生2 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园2 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8283 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全3 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊4 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan5 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿6 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊6 小时前
Polar WEB(1-20)
前端