快捷導(dǎo)航

element ui loading加載開啟與關(guān)閉方式

更新時(shí)間：2024年08月27日 14:44:18 作者：時(shí)丨光

這篇文章主要介紹了element ui loading加載開啟與關(guān)閉方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element ui loading加載開啟與關(guān)閉

我們?cè)谑褂胑lement ui loading加載組件的服務(wù)方式的時(shí)候想要在請(qǐng)求開始之前開啟組件，請(qǐng)求成功或者失敗時(shí)關(guān)閉組件，官網(wǎng)上是在一個(gè)方法里面寫著開啟與關(guān)閉，所以我們可以做一個(gè)小小的封裝；

 //Loading加載
      openFullScreen() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        return loading;
      }

這里我們?cè)陂_啟loading的同時(shí)，返回loading；

 closeFullScreen(loading){
        loading.close();
 },

關(guān)閉時(shí)接受開啟返回的loading；

//開啟
this.openFullScreen();
//vue框架 axios請(qǐng)求
 this.$http.post("url").then(res => {
	//請(qǐng)求成功關(guān)閉；
    this.closeFullScreen(this.openFullScreen());
 }).catch(()=>{
  	//請(qǐng)求失敗關(guān)閉；
    this.closeFullScreen(this.openFullScreen());
 })

封裝完的使用；

使用element ui的Loading組件

Element-UI 提供了 Loading 組件，通過對(duì)于這個(gè)組件進(jìn)行一些處理，我們能做到在發(fā)送請(qǐng)求的時(shí)候進(jìn)行 loading 操作

實(shí)現(xiàn)方式

先寫一個(gè)loading.js文件

import { Loading } from 'element-ui';

let loadingCount = 0;
let loading;

const startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: '加載中……',
    background: 'rgba(0, 0, 0, 0.7)'
  });
};

const endLoading = () => {
  loading.close();
};

export const showLoading = () => {
  if (loadingCount === 0) {
    startLoading();
  }
  loadingCount += 1;
};

export const hideLoading = () => {
  if (loadingCount <= 0) {
    return;
  }
  loadingCount -= 1;
  if (loadingCount === 0) {
    endLoading();
  }
};

再在axios的interceptor中調(diào)用

// ...
import { showLoading, hideLoading } from './loading';

/* 請(qǐng)求攔截器（請(qǐng)求之前的操作） */
ajax.interceptors.request.use((req) => {
  showLoading();
  return req;
}, err => Promise.reject(err));

/* 請(qǐng)求之后的操作 */
ajax.interceptors.response.use((res) => {
  hideLoading();

  return res;

  return Promise.reject(res);
}, (err) => {
  hideLoading();
  return Promise.reject(err);
});