vue-element 封装loading

TS封装

import { ElLoading } from "element-plus";

let loading: { close: () => void };
let flag: boolean = true;

function openLoading() {
  if (flag) {
    loading = ElLoading.service({
      customClass: "osloading", // *这里设置他的class名称
      fullscreen: true, //是否全屏
      lock: false, //是否锁定全屏滚动
      body: true, // text: "加载中...", // spinner: "el-icon-loading",
      background: "rgba(255, 255, 255, 0.7)",
    });
    flag = false;
  }

  setTimeout(function () {
    flag = true;
  }, 200);
}

function closeLoading() {
  if (loading !== undefined) {
    loading.close();
  }
}

export { openLoading, closeLoading };

JS封装

import { Loading } from "element-ui";

let loadingInstance = null;

export const loading = (isShow) => {
    if (isShow) {
        loadingInstance = Loading.service({
            customClass: "osloading", // *这里设置他的class名称
            fullscreen: true, //是否全屏
            lock: false, //是否锁定全屏滚动
            body: true,
            // text: "加载中...",
            //spinner: "el-icon-loading",
            background: "rgba(255, 255, 255, 0.7)",
        });
    } else {
        loadingInstance.close();
    }
};