diff --git a/packages/toolkits/pro/template/tinyvue/src/hooks/loading.ts b/packages/toolkits/pro/template/tinyvue/src/hooks/loading.ts index a6f2768a..46d38499 100644 --- a/packages/toolkits/pro/template/tinyvue/src/hooks/loading.ts +++ b/packages/toolkits/pro/template/tinyvue/src/hooks/loading.ts @@ -1,16 +1,33 @@ import { ref } from 'vue'; -export default function useLoading(initValue = false) { +/** + * use logding hook + * @param initValue + * @param closeDelay the dealy time of turning off loading to prevent ficker + * @returns + */ +export default function useLoading(initValue = false, closeDelay = 200) { + let preOpenTime = Date.now(); + let closeTimer: ReturnType | null; const loading = ref(initValue); const setLoading = (value: boolean) => { + if (value) { + preOpenTime = Date.now(); + } else { + const declinedTime = closeDelay - preOpenTime + Date.now(); + if (declinedTime > 0) { + closeTimer || + (closeTimer = setTimeout(() => { + loading.value = value; + closeTimer = null; + }, declinedTime)); + return; + } + } loading.value = value; }; const toggle = () => { - loading.value = !loading.value; - }; - return { - loading, - setLoading, - toggle, + setLoading(!loading.value); }; + return [loading, setLoading, toggle]; } diff --git a/packages/toolkits/pro/template/tinyvue/src/hooks/request.ts b/packages/toolkits/pro/template/tinyvue/src/hooks/request.ts index 7b853362..56316492 100644 --- a/packages/toolkits/pro/template/tinyvue/src/hooks/request.ts +++ b/packages/toolkits/pro/template/tinyvue/src/hooks/request.ts @@ -10,14 +10,14 @@ import useLoading from './loading'; export default function useRequest( api: () => Promise>, - defaultValue = [] as unknown as T, + defaultValue = ([] as unknown) as T, isLoading = true ) { - const { loading, setLoading } = useLoading(isLoading); + const [loading, setLoading] = useLoading(isLoading); const response = ref(defaultValue); api() - .then((res) => { - response.value = res.data as unknown as UnwrapRef; + .then(res => { + response.value = (res.data as unknown) as UnwrapRef; }) .finally(() => { setLoading(false); diff --git a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-info.vue b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-info.vue index f300a9e6..75a4a627 100644 --- a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-info.vue +++ b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-info.vue @@ -73,7 +73,7 @@ const router = useRouter(); const { t } = useI18n(); - const { loading, setLoading } = useLoading(); + const [ loading, setLoading ] = useLoading(); const userStore = useUserStore(); const loginFormInfo = ref(); diff --git a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue index 0c27dd7f..a72bd72f 100644 --- a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue +++ b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue @@ -72,7 +72,7 @@ const router = useRouter(); const { t } = useI18n(); - const { loading, setLoading } = useLoading(); + const [loading, setLoading] = useLoading(); const userStore = useUserStore(); const loginFormMail = ref(); diff --git a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-register.vue b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-register.vue index dce65a24..f46fc5e2 100644 --- a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-register.vue +++ b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-register.vue @@ -79,7 +79,7 @@ // 注册 const { t } = useI18n(); - const { loading, setLoading } = useLoading(); + const [loading, setLoading] = useLoading(); const ruleForm = ref(); // 切换模式