基於vue+element實現全域性loading過程詳解
阿新 • • 發佈:2020-07-11
專案中使用的是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: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0,0.7)' }
接下來是全域性的一個loading簡單封裝,程式碼如下
import ElementUI from 'element-ui'; import {loadingConfig} from '../src/config/index' //全域性的一個基本引數配置 var loading = null ; const loadingShow = () => { loading = ElementUI.Loading.service(loadingConfig); } const loadingHide = () => { loading.close(); } const loadingObj={ loadingShow,loadingHide } export default loadingObj
頁面跳轉時全域性配置loading,程式碼如下:
main.js中新增程式碼:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 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 /* eslint-disable no-new */ new Vue({ el: '#app',router,components: { App },template: '<App/>' }) //從後臺獲取的使用者角色 const role = 'user' //當進入一個頁面是會觸發導航守衛 router.beforeEach 事件 router.beforeEach((to,from,next) => { routerLoading ? glo_loading.loadingShow() : '' //如果全域性啟用頁面跳轉則載入loading if(to.meta.roles){ if(to.meta.roles.includes(role)){ next() //放行 }else{ next({path:"/404"}) //跳到404頁面 } }else{ next() //放行 } routerLoading ? glo_loading.loadingHide() : ''//關閉loading層 })
在ajax請求的時候呼叫全域性loading,程式碼如下:
// 新增請求攔截器 service.interceptors.request.use(function (config) { // 在傳送請求之前做些什麼 apiLoading ? glo_loading.loadingShow() : ''//全域性loading是否啟用 return config; },function (error) { // 對請求錯誤做些什麼 console.log(error); return Promise.reject(error); }); // 新增響應攔截器 service.interceptors.response.use(function (response) { // 對響應資料做點什麼 if(response.status == 200){ return response.data; }else{ Promise.reject(); } },function (error) { // 對響應錯誤做點什麼 console.log(error); apiLoading ? glo_loading.loadingHide() : '' return Promise.reject(error); });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。