基于vue+element实现全局loading过程详解

项目中使用的是vue+element实现的全局loading 1.引入所需组件，这里主要就是router和element组件，element组件引入可以参考element官网 2.下面就是重点及代码实现了 首先是全局的一个变量配置参数，代码如下： //全局页面跳转是否启用loading export const routerLoading = true; //全局api接口调用是否启用loading export const apiLoading = true; //loading参数配置 export const loadingConfig = { lock: true, text: 在本文中，我们将深入探讨如何基于Vue.js和Element UI库实现全局加载（loading）效果。全局加载通常用于在页面跳转或API接口调用时显示一个遮罩层，以提高用户体验，表明应用正在进行后台处理。 我们需要引入必要的组件。在Vue项目中，这包括Vue Router用于页面路由管理和Element UI，它提供了丰富的UI组件，其中包括loading服务。Element UI的引入可参考其官方文档，确保正确安装和配置。 然后，定义全局变量来控制loading的启用状态和配置。例如： ```javascript // 全局页面跳转是否启用loading export const routerLoading = true; // 全局api接口调用是否启用loading export const apiLoading = true; // loading参数配置 export const loadingConfig = { lock: true, text: "Loading", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }; ``` 在上述代码中，`loadingConfig`对象包含了loading的样式属性，如是否锁定页面（lock）、加载文本（text）、加载图标（spinner）和背景颜色（background）。 接下来，我们封装一个全局loading服务。这里创建一个名为`loadingObj`的对象，包含`loadingShow`和`loadingHide`两个方法，分别用于开启和关闭loading： ```javascript import ElementUI from 'element-ui'; import { loadingConfig } from '../src/config/index'; // 引入loading配置 var loading = null; const loadingShow = () => { loading = ElementUI.Loading.service(loadingConfig); }; const loadingHide = () => { loading.close(); }; const loadingObj = { loadingShow, loadingHide, }; export default loadingObj; ``` 在`main.js`文件中，导入并注册这个全局loading服务。同时，根据`routerLoading`变量决定是否在页面跳转时显示loading： ```javascript import Vue from 'vue'; import App from './App'; import router from './router'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import glo_loading from '../loading/index'; // 导入loading组件封装 import { routerLoading } from '../src/config/index'; // 引入全局的页面跳转loading启用状态 Vue.use(ElementUI); Vue.config.productionTip = false; new Vue({ el: '#app', router, components: { App }, template: '<App/>', }); // 导航守卫 router.beforeEach((to, from, next) => { routerLoading ? glo_loading.loadingShow() : ''; // 如果启用页面跳转loading，则显示loading // ...其他逻辑... routerLoading ? glo_loading.loadingHide() : ''; // 关闭loading层 }); ``` 对于API接口调用，我们可以使用axios或其他HTTP库，并添加请求和响应拦截器。在请求拦截器中，如果`apiLoading`为真，则调用`loadingShow`开启loading；在响应拦截器中，无论成功或失败，都调用`loadingHide`关闭loading： ```javascript // 添加请求拦截器 service.interceptors.request.use( (config) => { apiLoading ? glo_loading.loadingShow() : ''; // 全局loading是否启用 return config; }, (error) => { console.log(error); return Promise.reject(error); } ); // 添加响应拦截器 service.interceptors.response.use( (response) => { // ...处理响应数据... apiLoading ? glo_loading.loadingHide() : ''; // 关闭loading层 return response; }, (error) => { // ...处理响应错误... apiLoading ? glo_loading.loadingHide() : ''; // 关闭loading层 return Promise.reject(error); } ); ``` 通过以上步骤，我们就实现了基于Vue+Element的全局loading功能。在页面跳转和API请求时，系统会自动管理loading的显示和隐藏，从而提供流畅的用户体验。