antdv Spin组件拓展

antdv 组件库种Spin组件未提供直接的函数式全局调用方法；
在ajax请求，或者其他一些用纯js中需要调用的时候比较麻烦。
基于Spin拓展

util/decorator/spin

import Vue from "vue";
import { Spin } from "ant-design-vue";

let instance = null;

function getInstance() {
  if (!instance) {
    instance = new Vue({
      data: {
        show: false,
      },
      methods: {
        loading() {
          this.show = true;
        },
        close() {
          this.show = false;
        },
      },
      render(h, data) {
        const fullscreenLoading = {
          position: "fixed",
          left: 0,
          top: 0,
          width: "100%",
          height: "100%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        };
        return this.show ? (
          <div style={fullscreenLoading}>
            <Spin />
          </div>
        ) : (
          ""
        );
      },
    });
    const component = instance.$mount();
    document.body.appendChild(component.$el);
  }

  return instance;
}

Spin.show = function () {
  getInstance().loading();
};

Spin.hide = function () {
  getInstance().close();
};

export default Spin;