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: 'Loading',
 spinner: 'el-icon-loading',
 background: 'rgba(0, 0, 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 
})

aax에서 요청할 때 전역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);
});

이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.