526互联

基于element-plus全局封装Loading

发布时间 2023-11-23 14:03:20作者: 天宁哦

代码

新建一个loading.ts文件

import {
  ElLoading
} from "element-plus";

/* 全局请求 loading */
let loadingInstance: ReturnType < typeof ElLoading.service > ;

/**
 * @description 开启 Loading
 * */
const startLoading = () => {
  loadingInstance = ElLoading.service({
    fullscreen: true,
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)"
  });
};

/**
 * @description 结束 Loading
 * */
const endLoading = () => {
  loadingInstance.close();
};

/**
 * @description 显示全屏加载
 * */
let needLoadingRequestCount = 0;
export const showFullScreenLoading = () => {
  if (needLoadingRequestCount === 0) {
    startLoading();
  }
  needLoadingRequestCount++;
};

/**
 * @description 隐藏全屏加载
 * */
export const tryHideFullScreenLoading = () => {
  if (needLoadingRequestCount <= 0) return;
  needLoadingRequestCount--;
  if (needLoadingRequestCount === 0) {
    endLoading();
  }
};

当使用 Element Plus 组件库时，可以实现全局请求 loading 功能。上面提供的代码就是一个示例，下面是对该示例代码的完整分析。

一、初始化

首先，代码通过 import 语句从 “element-plus” 模块中导入了 ElLoading 对象，它是 Element Plus 组件库中的一个加载组件。

然后，定义了一个变量 loadingInstance，其类型为 ReturnType，表示 ElLoading.service 方法的返回值类型，用来存储 ElLoading.service 方法返回的 loading 实例。

二、方法说明

1. startLoading()

该方法用于开启 loading，创建一个 loading 实例，并显示在全屏上。它通过调用 ElLoading.service 方法创建一个 loading 实例，并传入一些配置选项，包括是否全屏、是否锁定背景、加载文本和背景颜色。

2. endLoading()

该方法用于结束 loading，关闭之前创建的 loading 实例。它调用 loadingInstance.close() 来关闭 loading 实例。

3. showFullScreenLoading()

该方法用于显示全屏加载。它会根据 needLoadingRequestCount 变量的值判断当前是否已经有正在进行的请求。如果 needLoadingRequestCount 的值为 0，则调用 startLoading 方法开启 loading。

4. tryHideFullScreenLoading()

该方法用于隐藏全屏加载。它会根据 needLoadingRequestCount 变量的值来判断是否需要关闭 loading。每次调用该方法时，将 needLoadingRequestCount 的值减一，当 needLoadingRequestCount 的值减少到 0 时，调用 endLoading 方法来关闭 loading。

实现全局 loading 功能
在使用这些方法时，需要在每个请求发送前调用 showFullScreenLoading 方法，在请求结束后调用 tryHideFullScreenLoading 方法。通过控制 needLoadingRequestCount 变量的值来决定是否显示或隐藏 loading。

5.难点分析

loadingInstance 是一个变量，它的类型是通过调用 ElLoading.service 方法的返回值类型。在这段代码中，ReturnType 的作用是获取 ElLoading.service 方法的返回值类型。
通过 typeof ElLoading.service 获取 ElLoading.service 方法的类型，然后通过 ReturnType 获取该方法的返回值类型。这样，loadingInstance 的类型就是 ElLoading.service 方法的返回值类型。
通过将 ElLoading.service 返回的实例赋值给 loadingInstance，可以对该 loading 实例进行操作，如开启 loading、关闭 loading 等。

这样做可以实现全局请求 loading 功能，让用户在请求进行中时能够看到 loading 的状态，提升用户体验。