Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-04-05 07:15:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

♻️ loading组件重构

Browse Source
This commit is contained in:
目棃
2024-12-16 11:13:30 +08:00
parent 1f167845a4
commit 24e3f11c4a
33 changed files with 482 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/func/loading.ts
View File

@@ -1,7 +1,7 @@
/**
* @file component/func/loading.ts
* @description loading 组件封装，函数式调用
* @since Beta v0.6.3
* @since Beta v0.6.7
*/
import type { ComponentInternalInstance, VNode } from "vue";
@@ -11,18 +11,19 @@ import loading from "./loading.vue";
const loadingId = "tg-func-loading";
export type LoadingParams = { show: boolean; title: string; subtitle: string; empty?: boolean };
export type LoadingParams = { show: boolean; title?: string; subtitle?: string; empty?: boolean };
type LoadingUpdateParams = Omit<LoadingParams, "show" | "subtitle"> & { timeout?: number };
// 低于100则不可感，高于200则过于缓慢
const TIMEOUT: Readonly<number> = 150;
/**
* @description 自定义 loading 组件
* @since Beta v0.6.3
* @since Beta v0.6.7
* @return LoadingInstance
*/
interface LoadingInstance extends ComponentInternalInstance {
exposeProxy: {
displayBox: (props: LoadingParams) => void;
};
}
type LoadingInstance = ComponentInternalInstance & {
exposeProxy: { displayBox: (props: LoadingParams) => Promise<void> };
};
function renderBox(props: LoadingParams): VNode {
const container = document.createElement("div");
@@ -35,31 +36,36 @@ function renderBox(props: LoadingParams): VNode {
let loadingInstance: VNode;
function showLoadingFull(show: boolean, title: string, sub: string, empty: boolean): void {
const params: LoadingParams = { show: show, title: title, subtitle: sub, empty: empty };
async function showLoadingFull(option: LoadingParams): Promise<void> {
if (loadingInstance !== undefined) {
const boxVue = <LoadingInstance>loadingInstance.component;
return boxVue.exposeProxy.displayBox(params);
return await boxVue.exposeProxy.displayBox(option);
} else {
loadingInstance = renderBox(params);
return showLoadingFull(show, title, sub, empty);
loadingInstance = renderBox(option);
return await showLoadingFull(option);
}
}
function showLoadingStart(title: string, sub?: string): void {
showLoadingFull(true, title, sub ?? "", false);
async function showLoadingStart(
title: string,
subtitle?: string,
timeout: number = TIMEOUT,
): Promise<void> {
await showLoadingFull({ show: true, title, subtitle, empty: false });
await new Promise<void>((resolve) => setTimeout(resolve, timeout));
}
function showLoadingUpdate(title: string, sub?: string, empty?: boolean): void {
showLoadingFull(true, title, sub ?? "", empty ?? false);
async function showLoadingUpdate(subtitle: string, opt?: LoadingUpdateParams): Promise<void> {
await showLoadingFull({ show: true, title: opt?.title, subtitle, empty: opt?.empty });
await new Promise<void>((resolve) => setTimeout(resolve, opt?.timeout ?? TIMEOUT));
}
function showLoadingEmpty(title: string, sub?: string): void {
showLoadingFull(true, title, sub ?? "", true);
async function showLoadingEmpty(title: string, subtitle?: string): Promise<void> {
await showLoadingFull({ show: true, title, subtitle, empty: true });
}
function showLoadingEnd(): void {
showLoadingFull(false, "", "", false);
async function showLoadingEnd(): Promise<void> {
await showLoadingFull({ show: false });
}
const showLoading = {