快捷導(dǎo)航

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

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

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

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

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

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

這里我們在開啟loading的同時，返回loading；

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

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

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

封裝完的使用；

使用element ui的Loading組件

Element-UI 提供了 Loading 組件，通過對于這個組件進行一些處理，我們能做到在發(fā)送請求的時候進行 loading 操作

實現(xiàn)方式

先寫一個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';

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

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

  return res;

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