关于vue.js: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;