基于AntDesignVue 自定义api方式生成全局加载loading效果

               因为ant-design-vue 组件库中是有加载状态的组件的spin组件，但是spin组件是有局限性的，只能通过使用组件的方式显示加载状态，不能通过api的方式使用。而且通过组件的方式使用加载状态时，如果想要控制加载状态在页面上的范围必须通过将该页面组件放入spin标签中才行。在此种情况下如果想要使用spin组件达到一个全屏范围的加载状态，则需要将app组件或者app的唯一子组件放入spin标签中，才能使spin组件产生的加载状态达到一个全屏状态。但是因为modal弹窗的z-index层级为1000，如果想要全屏加载状态遮盖住modal弹窗的话就必须将spin组件的样式z-index设置大于1000，因为app的唯一子组件是被spin组件包裹着的如果spin组件的样式z-index被设置大于1000，则系统中的所有弹窗都将会被系统中的页面遮盖而不显示。所以按照ant-design-vue官方的组件介绍方法，spin加载状态无法做到全屏遮盖非全屏的modal弹窗

解决方法：

//全局css样式
.my-spin{
  width:100%;
  height:100%;
  z-index:3000;
  display:flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top:0;
  >div{
    position: absolute;
    width:100%;
    height: 100%;
  }
}

//index.js  创建自定义方法
/**
 * @description 创建或者关闭全屏加载状态效果
 * @param {Boolean} visible true 打开全屏加载状态，false 关闭全屏加载状态
 */

export function fullScreenLoading(visible) {
  if (visible) {
    const fragment = new DocumentFragment();
    const loadDom = document.createElement("div");
    loadDom.setAttribute("class", "my-spin");
    const loadChild = document.createElement("div");
    loadChild.setAttribute("class", "ant-spin-container ant-spin-blur");
    const spinSpan = document.createElement("span");
    spinSpan.setAttribute("class", "ant-spin-dot ant-spin-dot-spin");
    for (let i = 0; i < 4; i++) {
      const liDom = document.createElement("li");
      liDom.setAttribute("class", "ant-spin-dot-item");
      spinSpan.appendChild(liDom);
    }
    loadDom.appendChild(spinSpan);
    loadDom.appendChild(loadChild);
    fragment.appendChild(loadDom);
    document.body.appendChild(fragment);
  } else {
    const loading = document.querySelector(".my-spin");
    if (loading) {
      document.body.removeChild(loading);
    }
  }
}

只需要在使用的时候将方法引入即可，

缺点：只能生成带有单一加载状态图标动画的全屏加载状态