type
status
date
slug
summary
tags
category
icon
password
SnowDream Loading - Vue 梦幻加载组件
一个功能丰富、视觉效果出色的 Vue.js 全局页面加载组件，如雪花般轻盈美丽，如梦境般炫彩动人。支持路由切换加载、图片预加载、自定义配置等功能。
✨ 特性
- 🎨 炫酷动效：渐变背景、浮动装饰、旋转圆环、跳跃文字
- 🛣️ 路由集成：自动在路由切换时显示/隐藏加载动画
- 🖼️ 智能预加载：等待页面图片资源加载完成
- ⚙️ 灵活配置：支持自定义延迟时间、超时时间、排除路由等
- 📱 响应式设计：适配移动端设备
- 🎯 单例模式：全局统一的加载状态管理
📁 项目结构
🚀 快速开始
第一步：创建组件文件
1. 创建 src/components/PageLoading.vue
👇 在此处放置 PageLoading.vue 的完整代码
2. 创建 src/utils/loading.js
👇 在此处放置 loading.js 的完整代码
第二步：在项目中使用
1. 基础使用（推荐）
在
main.js 中导入并初始化：2. 特殊页面自定义加载
对于需要特殊处理的页面（如登录页），可以自行控制加载逻辑：
👇 特殊页面使用示例（如登录页面）
⚙️ 配置选项
setupRouter 配置
参数 | 类型 | 默认值 | 说明 |
routeChangeDelay | number | 300 | 路由切换完成后的延迟时间(ms) |
waitForImages | boolean | true | 是否等待页面图片加载完成 |
maxWaitTime | number | 8000 | 最大等待时间(ms) |
excludeRoutes | Array | [] | 排除的路由列表，支持字符串和正则表达式 |
excludeRoutes 示例
handleFirstLoad 配置
参数 | 类型 | 默认值 | 说明 |
firstLoadDelay | number | 600 | 首次加载完成后的延迟时间(ms) |
waitForImages | boolean | true | 是否等待图片加载完成 |
maxWaitTime | number | 10000 | 最大等待时间(ms) |
🎨 样式定制
主要样式变量
组件采用渐变背景和多层动画效果，可以通过修改
PageLoading.vue 中的以下部分来自定义样式：响应式断点
🔧 API 方法
工具类方法
组件实例方法
高级用法
📱 响应式支持
组件内置响应式设计，在不同设备上的表现：
桌面端（> 768px）
- 完整动画效果
- 大尺寸文字和圆环
- 流畅的渐变和阴影效果
移动端（≤ 768px）
- 适配小屏幕的文字大小
- 调整后的圆环尺寸
- 优化的触摸体验
🚨 注意事项
性能优化建议
- 合理设置超时时间：避免因资源加载过慢导致长时间显示加载动画
- 使用排除路由：对于不需要加载动画的页面设置排除
- 图片优化：确保页面图片已经过压缩优化
兼容性说明
- Vue 版本：支持 Vue 2.x
- 浏览器支持：现代浏览器（IE 11+）
- 移动端：支持 iOS Safari、Android Chrome
🐛 常见问题
Q: 为什么某些页面的加载动画显示时间过长？
A: 检查以下几点：
- 页面是否有大图片或网络请求较慢的资源
- 调整
maxWaitTime参数
- 考虑将该路由添加到
excludeRoutes中
Q: 如何禁用某个路由的加载动画？
A: 在
setupRouter 的 excludeRoutes 参数中添加该路由：Q: 可以自定义加载动画的样式吗？
A: 可以，直接修改
PageLoading.vue 组件中的 CSS 样式，参考上面的"样式定制"部分。Q: 在单页应用中首次加载没有显示动画？
A: 确保在
main.js 的 mounted 钩子中调用了 handleFirstLoad 方法。Q: 如何调试加载流程？
A: 工具类已内置 console.log，可以在开发者工具中查看加载流程的日志。
- Author:SnowDreamXUE
- URL:https://notion.snowdreamxue.top/article/SnowDreamLoading-Vue%E6%A2%A6%E5%B9%BB%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts
