You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.3 KiB
117 lines
3.3 KiB
11 months ago
|
import { ref, reactive, h, Transition, withCtx, withDirectives, createVNode, vShow, createApp, toRefs } from 'vue';
|
||
|
|
import { removeClass } from '../../../utils/dom.mjs';
|
||
|
|
|
||
|
|
function createLoadingComponent(options) {
|
||
|
|
let afterLeaveTimer;
|
||
|
|
const afterLeaveFlag = ref(false);
|
||
|
|
const data = reactive({
|
||
|
|
...options,
|
||
|
|
originalPosition: "",
|
||
|
|
originalOverflow: "",
|
||
|
|
visible: false
|
||
|
|
});
|
||
|
|
function setText(text) {
|
||
|
|
data.text = text;
|
||
|
|
}
|
||
|
|
function destroySelf() {
|
||
|
|
const target = data.parent;
|
||
|
|
if (!target.vLoadingAddClassList) {
|
||
|
|
let loadingNumber = target.getAttribute("loading-number");
|
||
|
|
loadingNumber = Number.parseInt(loadingNumber) - 1;
|
||
|
|
if (!loadingNumber) {
|
||
|
|
removeClass(target, "el-loading-parent--relative");
|
||
|
|
target.removeAttribute("loading-number");
|
||
|
|
} else {
|
||
|
|
target.setAttribute("loading-number", loadingNumber.toString());
|
||
|
|
}
|
||
|
|
removeClass(target, "el-loading-parent--hidden");
|
||
|
|
}
|
||
|
|
remvoeElLoadingChild();
|
||
|
|
}
|
||
|
|
function remvoeElLoadingChild() {
|
||
|
|
var _a, _b;
|
||
|
|
(_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
|
||
|
|
}
|
||
|
|
function close() {
|
||
|
|
var _a;
|
||
|
|
if (options.beforeClose && !options.beforeClose())
|
||
|
|
return;
|
||
|
|
const target = data.parent;
|
||
|
|
target.vLoadingAddClassList = void 0;
|
||
|
|
afterLeaveFlag.value = true;
|
||
|
|
clearTimeout(afterLeaveTimer);
|
||
|
|
afterLeaveTimer = window.setTimeout(() => {
|
||
|
|
if (afterLeaveFlag.value) {
|
||
|
|
afterLeaveFlag.value = false;
|
||
|
|
destroySelf();
|
||
|
|
}
|
||
|
|
}, 400);
|
||
|
|
data.visible = false;
|
||
|
|
(_a = options.closed) == null ? void 0 : _a.call(options);
|
||
|
|
}
|
||
|
|
function handleAfterLeave() {
|
||
|
|
if (!afterLeaveFlag.value)
|
||
|
|
return;
|
||
|
|
afterLeaveFlag.value = false;
|
||
|
|
destroySelf();
|
||
|
|
}
|
||
|
|
const elLoadingComponent = {
|
||
|
|
name: "ElLoading",
|
||
|
|
setup() {
|
||
|
|
return () => {
|
||
|
|
const svg = data.spinner || data.svg;
|
||
|
|
const spinner = h("svg", {
|
||
|
|
class: "circular",
|
||
|
|
viewBox: data.svgViewBox ? data.svgViewBox : "25 25 50 50",
|
||
|
|
...svg ? { innerHTML: svg } : {}
|
||
|
|
}, [
|
||
|
|
h("circle", {
|
||
|
|
class: "path",
|
||
|
|
cx: "50",
|
||
|
|
cy: "50",
|
||
|
|
r: "20",
|
||
|
|
fill: "none"
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
const spinnerText = data.text ? h("p", { class: "el-loading-text" }, [data.text]) : void 0;
|
||
|
|
return h(Transition, {
|
||
|
|
name: "el-loading-fade",
|
||
|
|
onAfterLeave: handleAfterLeave
|
||
|
|
}, {
|
||
|
|
default: withCtx(() => [
|
||
|
|
withDirectives(createVNode("div", {
|
||
|
|
style: {
|
||
|
|
backgroundColor: data.background || ""
|
||
|
|
},
|
||
|
|
class: [
|
||
|
|
"el-loading-mask",
|
||
|
|
data.customClass,
|
||
|
|
data.fullscreen ? "is-fullscreen" : ""
|
||
|
|
]
|
||
|
|
}, [
|
||
|
|
h("div", {
|
||
|
|
class: "el-loading-spinner"
|
||
|
|
}, [spinner, spinnerText])
|
||
|
|
]), [[vShow, data.visible]])
|
||
|
|
])
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const vm = createApp(elLoadingComponent).mount(document.createElement("div"));
|
||
|
|
return {
|
||
|
|
...toRefs(data),
|
||
|
|
setText,
|
||
|
|
remvoeElLoadingChild,
|
||
|
|
close,
|
||
|
|
handleAfterLeave,
|
||
|
|
vm,
|
||
|
|
get $el() {
|
||
|
|
return vm.$el;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export { createLoadingComponent };
|
||
|
|
//# sourceMappingURL=loading.mjs.map
|