1. 理解默认加载组件的限制
在若依Vue项目中，默认使用的是Element Plus提供的el-loading组件。虽然该组件提供了基本的加载动画功能，但其样式和动效可能无法完全满足个性化需求。例如，默认的旋转图标可能不符合品牌设计规范，或者需要更复杂的动画效果。
默认加载动画的颜色、大小和透明度是固定的。开发者可能希望根据业务场景调整加载动画的表现形式。
因此，我们需要了解如何通过修改配置参数或引入自定义资源来实现个性化的加载动画。
2. 自定义加载动画的基础方法
可以通过设置spinner属性为自定义SVG或CSS动画图标，从而实现基础的样式调整。以下是具体步骤：
准备一个自定义的SVG图标文件，并将其路径传递给spinner属性。在全局或局部加载时，通过el-loading的配置项应用此图标。通过loading.css文件调整样式细节，如颜色、大小和透明度。
// 示例代码：自定义加载动画
import { Loading } from 'element-plus';
const loadingInstance = Loading.service({
spinner: 'url(/path/to/custom-spinner.svg)',
background: 'rgba(0, 0, 0, 0.7)',
lock: true,
});
3. 使用CSS关键帧动画设计独特效果
如果需要更复杂的旋转效果，可以利用CSS关键帧动画（@keyframes）进行设计。以下是一个简单的例子：
/* 定义关键帧动画 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 应用到加载图标 */
.custom-spinner {
animation: spin 1s linear infinite;
}
将上述CSS类名绑定到spinner属性中即可生效。
4. 引入Lottie动画实现高级动效
对于更复杂的需求，可以引入Lottie动画库。Lottie支持JSON格式的动画文件，能够轻松实现高质量的动态效果。
步骤描述1安装Lottie库：npm install lottie-web2准备Lottie动画文件（JSON格式）。3结合JavaScript动态渲染加载内容。
5. 全局与局部加载的优雅应用
为了确保自定义加载动画能够在全局或局部场景中正确应用，可以按照以下方式组织代码：
// 全局加载
import { createApp } from 'vue';
import { Loading } from 'element-plus';
const app = createApp(App);
app.config.globalProperties.$loading = Loading;
// 局部加载
export default {
methods: {
showLoading() {
this.loadingInstance = this.$loading({
spinner: 'url(/path/to/lottie.json)',
lock: true,
});
},
hideLoading() {
this.loadingInstance.close();
},
},
};
通过这种方式，开发者可以灵活地控制加载动画的显示和隐藏。