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 ? (
) : (
""
);
},
});
const component = instance.$mount();
document.body.appendChild(component.$el);
}
return instance;
}
Spin.show = function () {
getInstance().loading();
};
Spin.hide = function () {
getInstance().close();
};
export default Spin;