优雅使用 Element-UI 的 Loading 组件

骑猪看日落 2022-03-02 14:00 389阅读 0赞

## 背景 ##

Element-UI 提供了 Loading 组件，通过对于这个组件进行一些处理，我们能做到在发送请求的时候进行 loading 操作

## 实现 ##

先写一个 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 中调用：

// ...
    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);
    });

作者：最尾一名  
链接：https://www.jianshu.com/p/95ec2286bc6d  
来源：简书

发表评论取消回复

表情：

评论列表（有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementUI-el-table组件使用总结

一、背景 vue2项目中用到el-table这个组件，但基础的功能不够用，所以需要自定义二、表头自定义比如要让表头展现出下面的形式： ![f09934df5

我不是女神ヾ/ 2024年03月23日 15:54/ 0 赞/ 74 阅读

相关 Saber教程：ElementUI组件的引入示例

ElementUI组件 ElementUI官方文档文档地址：[https://element.eleme.cn/\/zh-CN/component/quickst

ゞ浴缸里的玫瑰/ 2024年02月25日 04:15/ 0 赞/ 45 阅读

相关 ElementUI的DateTimePicker组件修改时间格式

场景 ElementUI的dateTimePicker组件是一个日期和时间共存的选择器。有时我们需要规定选择时的时间格式，这时就要用这个组件的format属性。

红太狼/ 2023年10月18日 11:32/ 0 赞/ 33 阅读

相关 Vue：使用elementUI upload组件上传excel文件

elementUI官方的upload组件文档可[点此查看][Link 1]。页面效果如下所示，支持文件的二次确认上传 ![在这里插入图片描述][watermark_t

╰半橙微兮°/ 2023年10月11日 12:39/ 0 赞/ 19 阅读

相关 elementUI中popover弹框组件，使用多个popover组件时，遇到的问题

问题描述：elementui中渲染多个popover组件时，点击组件内按钮，弹框不隐藏；或者多个弹框时，嵌套操作不起作用；或者popover组件点击不会隐藏；解决思路：写

男娘i/ 2023年02月19日 01:26/ 0 赞/ 14 阅读

相关 elementui组件中，树形组件的使用

项目场景： elementui组件中，树形组件的使用 -------------------- 问题描述：通过树形结构展示，点击勾选数据。没有展开树结构的情况

本是古典何须时尚/ 2022年10月27日 01:34/ 0 赞/ 34 阅读

相关 elementUI中的el-scrollbar 组件

<div style="background:FAFBFF;width:90%; float:right;border-radius:10px;height:9

旧城等待，/ 2022年10月19日 14:57/ 0 赞/ 187 阅读

相关优雅使用 Element-UI 的 Loading 组件

背景 Element-UI 提供了 Loading 组件，通过对于这个组件进行一些处理，我们能做到在发送请求的时候进行 loading 操作实现先写一个 lo

骑猪看日落/ 2022年03月02日 14:00/ 0 赞/ 390 阅读

相关如何优雅的封装vue组件

如何优雅的封装vue组件 > 在编写组件时，最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系，但是可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外

一时失言乱红尘/ 2022年01月19日 22:29/ 0 赞/ 347 阅读

相关 uniapp loading 组件

> 组件：loading.vue <template> <view> <view class="cu-load load-modal" v-if

「爱情、让人受尽委屈。」/ 2021年09月19日 16:36/ 0 赞/ 1009 阅读