Vue+elementUi loading效果

elementui的loading效果

有指令和服务两种,指令是通过开关控制,服务是通过loading实例对象去控制的,但是这里需要注意的是,如果有多个请求发出,loading效果可能展示不对,比如请求两个接口,一个接口请求回来之后,立马关闭loading ,导致第二个请求还没有回来,已经关闭loading了,这样的体验是不好的。

这里解决的思路是,判断有多少个请求,等所有的请求回来之后再关闭

import {Loading} from 'element-ui'

let loading;//loading的实例对象

let loadingCount = 0;

function start(){

  loading = Loading.service({

    lock:true,

    text:'加载中',

    background:'rgba(0,0,0,0.1)'

  })
};

function end(){

  laoding.close();
}

 function showLoaing(){

  if( loadingCount==0){

    start();

  };

  loadingCount++

};

function hideLoading(){

  loadingCount--;

  if(loadingCount==0){

           end()

  }
}

 axios.interceptors.request.use(req=>{

      showLoaing();

});

axios.interceptors.response.use(res=>{

  hideLoading()

},err=>{

  try{

    hideLoading()})

  }catch(err){

    console.log(err)

  }

}

原文地址:https://www.cnblogs.com/slfmeimei/p/11527211.html