vue中使用elementui的loading实现局部加载中

在做渲染表格或者其他请求后台数据时做加载中过渡

直接上代码，在uitls文件下新建一个loading.js，代码如下，可以直接使用

import Vue from "vue";
import { Loading } from "element-ui";

let loadOn;
let loadingCount = 0;
function startLoading(target) {
  const options = {
    lock: true,
    text: "Loading...",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
    target: document.querySelector(target),//target
  };
  loadOn = Loading.service(options);
  return loadOn;
}

function endLoading() {
  loadOn.close();
}

export function showFullScreenLoading(target) {
  if (loadingCount=== 0) {
    startLoading(target);
  }
  loadingCount++;
}
export function hideFullScreenLoading() {
  if (loadingCount<= 0) return;
  loadingCount--;
  if (loadingCount=== 0) {
    endLoading();
  }
}

在使用的页面局部使用，或者在main.js中全局

比如在content下

showFullScreenLoading(".content")