From 19a00a0b049a6e53e3dc190be7498703cf2fb3b2 Mon Sep 17 00:00:00 2001 From: YongGit <1013588891@qq.com> Date: Sun, 12 May 2024 21:02:58 +0800 Subject: [PATCH] auto --- hooks/404.html | 2 +- .../assets/en_useRequest_loadingDelay_index.md.765ab71b.js | 1 - .../assets/en_useRequest_loadingDelay_index.md.907067ef.js | 1 + ...=> en_useRequest_loadingDelay_index.md.907067ef.lean.js} | 2 +- hooks/assets/useRequest_loadingDelay_index.md.7b569100.js | 1 - hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.js | 1 + ...js => useRequest_loadingDelay_index.md.a4e71d74.lean.js} | 2 +- hooks/en/guide/index.html | 2 +- hooks/en/index.html | 2 +- hooks/en/migrate/index.html | 2 +- hooks/en/onlineTeaching/index.html | 2 +- hooks/en/useAsyncOrder/index.html | 2 +- hooks/en/useBoolean/index.html | 2 +- hooks/en/useCookieState/index.html | 2 +- hooks/en/useCounter/index.html | 2 +- hooks/en/useDarkMode/index.html | 2 +- hooks/en/useDebounce/index.html | 2 +- hooks/en/useDebounceFn/index.html | 2 +- hooks/en/useDrop/index.html | 2 +- hooks/en/useElementBounding/index.html | 2 +- hooks/en/useEventEmitter/index.html | 2 +- hooks/en/useEventListener/index.html | 2 +- hooks/en/useExternal/index.html | 2 +- hooks/en/useFavicon/index.html | 2 +- hooks/en/useFetchs/index.html | 2 +- hooks/en/useFocusWithin/index.html | 2 +- hooks/en/useFormatResult/index.html | 2 +- hooks/en/useFull/index.html | 2 +- hooks/en/useHover/index.html | 2 +- hooks/en/useImmer/index.html | 2 +- hooks/en/useInViewport/index.html | 2 +- hooks/en/useInfiniteScroll/index.html | 2 +- hooks/en/useInterval/index.html | 2 +- hooks/en/useKeyPress/index.html | 2 +- hooks/en/useLocalStorageState/index.html | 2 +- hooks/en/useLockFn/index.html | 2 +- hooks/en/useLongPress/index.html | 2 +- hooks/en/useMap/index.html | 2 +- hooks/en/useMedia/index.html | 2 +- hooks/en/useMouse/index.html | 2 +- hooks/en/useMutationObserver/index.html | 2 +- hooks/en/useNetwork/index.html | 2 +- hooks/en/usePreview/index.html | 2 +- hooks/en/usePrevious/index.html | 2 +- hooks/en/useRequest/basic/index.html | 2 +- hooks/en/useRequest/cache/index.html | 2 +- hooks/en/useRequest/debounce/index.html | 2 +- hooks/en/useRequest/devtools/index.html | 2 +- hooks/en/useRequest/fetchs/index.html | 2 +- hooks/en/useRequest/formatResult/index.html | 2 +- hooks/en/useRequest/global/index.html | 2 +- hooks/en/useRequest/guide/index.html | 2 +- hooks/en/useRequest/index.html | 2 +- hooks/en/useRequest/loadingDelay/index.html | 6 +++--- hooks/en/useRequest/middleware/index.html | 2 +- hooks/en/useRequest/plugin/index.html | 2 +- hooks/en/useRequest/plugins/broadcastChannel/index.html | 2 +- hooks/en/useRequest/plugins/fetchsing/index.html | 2 +- hooks/en/useRequest/polling/index.html | 2 +- hooks/en/useRequest/ready/index.html | 2 +- hooks/en/useRequest/refreshDeps/index.html | 2 +- hooks/en/useRequest/refreshOnWindowFocus/index.html | 2 +- hooks/en/useRequest/retry/index.html | 2 +- hooks/en/useRequest/scroll/index.html | 2 +- hooks/en/useRequest/throttle/index.html | 2 +- hooks/en/useResizeObserver/index.html | 2 +- hooks/en/useScroll/index.html | 2 +- hooks/en/useSessionStorageState/index.html | 2 +- hooks/en/useSet/index.html | 2 +- hooks/en/useSetState/index.html | 2 +- hooks/en/useSize/index.html | 2 +- hooks/en/useThrottle/index.html | 2 +- hooks/en/useThrottleFn/index.html | 2 +- hooks/en/useTimeout/index.html | 2 +- hooks/en/useTitle/index.html | 2 +- hooks/en/useToggle/index.html | 2 +- hooks/en/useTrackedEffect/index.html | 2 +- hooks/en/useUpdate/index.html | 2 +- hooks/en/useUrlState/index.html | 2 +- hooks/en/useVirtualList/index.html | 2 +- hooks/en/useWebSocket/index.html | 2 +- hooks/en/useWhyDidYouUpdate/index.html | 2 +- hooks/en/useWinResize/index.html | 2 +- hooks/en/useWorker/index.html | 2 +- hooks/guide/index.html | 2 +- hooks/hashmap.json | 2 +- hooks/index.html | 2 +- hooks/migrate/index.html | 2 +- hooks/onlineTeaching/index.html | 2 +- hooks/useAsyncOrder/index.html | 2 +- hooks/useBoolean/index.html | 2 +- hooks/useCookieState/index.html | 2 +- hooks/useCounter/index.html | 2 +- hooks/useDarkMode/index.html | 2 +- hooks/useDebounce/index.html | 2 +- hooks/useDebounceFn/index.html | 2 +- hooks/useDrop/index.html | 2 +- hooks/useElementBounding/index.html | 2 +- hooks/useEventEmitter/index.html | 2 +- hooks/useEventListener/index.html | 2 +- hooks/useExternal/index.html | 2 +- hooks/useFavicon/index.html | 2 +- hooks/useFetchs/index.html | 2 +- hooks/useFocusWithin/index.html | 2 +- hooks/useFormatResult/index.html | 2 +- hooks/useFull/index.html | 2 +- hooks/useHover/index.html | 2 +- hooks/useImmer/index.html | 2 +- hooks/useInViewport/index.html | 2 +- hooks/useInfiniteScroll/index.html | 2 +- hooks/useInterval/index.html | 2 +- hooks/useKeyPress/index.html | 2 +- hooks/useLocalStorageState/index.html | 2 +- hooks/useLockFn/index.html | 2 +- hooks/useLongPress/index.html | 2 +- hooks/useMap/index.html | 2 +- hooks/useMedia/index.html | 2 +- hooks/useMouse/index.html | 2 +- hooks/useMutationObserver/index.html | 2 +- hooks/useNetwork/index.html | 2 +- hooks/usePreview/index.html | 2 +- hooks/usePrevious/index.html | 2 +- hooks/useRequest/basic/index.html | 2 +- hooks/useRequest/cache/index.html | 2 +- hooks/useRequest/debounce/index.html | 2 +- hooks/useRequest/devtools/index.html | 2 +- hooks/useRequest/fetchs/index.html | 2 +- hooks/useRequest/formatResult/index.html | 2 +- hooks/useRequest/global/index.html | 2 +- hooks/useRequest/guide/index.html | 2 +- hooks/useRequest/index.html | 2 +- hooks/useRequest/loadingDelay/index.html | 6 +++--- hooks/useRequest/middleware/index.html | 2 +- hooks/useRequest/plugin/index.html | 2 +- hooks/useRequest/plugins/broadcastChannel/index.html | 2 +- hooks/useRequest/plugins/fetchsing/index.html | 2 +- hooks/useRequest/polling/index.html | 2 +- hooks/useRequest/ready/index.html | 2 +- hooks/useRequest/refreshDeps/index.html | 2 +- hooks/useRequest/refreshOnWindowFocus/index.html | 2 +- hooks/useRequest/retry/index.html | 2 +- hooks/useRequest/scroll/index.html | 2 +- hooks/useRequest/throttle/index.html | 2 +- hooks/useResizeObserver/index.html | 2 +- hooks/useScroll/index.html | 2 +- hooks/useSessionStorageState/index.html | 2 +- hooks/useSet/index.html | 2 +- hooks/useSetState/index.html | 2 +- hooks/useSize/index.html | 2 +- hooks/useThrottle/index.html | 2 +- hooks/useThrottleFn/index.html | 2 +- hooks/useTimeout/index.html | 2 +- hooks/useTitle/index.html | 2 +- hooks/useToggle/index.html | 2 +- hooks/useTrackedEffect/index.html | 2 +- hooks/useUpdate/index.html | 2 +- hooks/useUrlState/index.html | 2 +- hooks/useVirtualList/index.html | 2 +- hooks/useWebSocket/index.html | 2 +- hooks/useWhyDidYouUpdate/index.html | 2 +- hooks/useWinResize/index.html | 2 +- hooks/useWorker/index.html | 2 +- 162 files changed, 164 insertions(+), 164 deletions(-) delete mode 100644 hooks/assets/en_useRequest_loadingDelay_index.md.765ab71b.js create mode 100644 hooks/assets/en_useRequest_loadingDelay_index.md.907067ef.js rename hooks/assets/{en_useRequest_loadingDelay_index.md.765ab71b.lean.js => en_useRequest_loadingDelay_index.md.907067ef.lean.js} (99%) delete mode 100644 hooks/assets/useRequest_loadingDelay_index.md.7b569100.js create mode 100644 hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.js rename hooks/assets/{useRequest_loadingDelay_index.md.7b569100.lean.js => useRequest_loadingDelay_index.md.a4e71d74.lean.js} (99%) diff --git a/hooks/404.html b/hooks/404.html index efe481fbf..f0c55080d 100644 --- a/hooks/404.html +++ b/hooks/404.html @@ -14,7 +14,7 @@
Skip to content

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
- + diff --git a/hooks/assets/en_useRequest_loadingDelay_index.md.765ab71b.js b/hooks/assets/en_useRequest_loadingDelay_index.md.765ab71b.js deleted file mode 100644 index 0fe2048db..000000000 --- a/hooks/assets/en_useRequest_loadingDelay_index.md.765ab71b.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as l}from"./chunks/demo.147a912f.js";import{l as o,o as C,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a('

Loading Delay

By setting options.loadingDelay, you can delay the time when loading turns to true, effectively prevent UI flashing.

Code demonstration

Basic usage

',4),t=a('

API

PropertyDescriptionTypeDefault
loadingDelaySet the delay time for loading to become truenumber | Ref<number>0

Remark

options.loadingDelay supports dynamic changes.

Source

Source \u2022 Docs \u2022 Demo

',6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.en-US.md"},"headers":[{"level":2,"title":"Code demonstration","slug":"code-demonstration"},{"level":3,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"Remark","slug":"remark"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"en/useRequest/loadingDelay/index.md"}'),F={name:"en/useRequest/loadingDelay/index.md"},i=Object.assign(F,{setup(A){return(D,r)=>{const n=o("demo");return C(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"effectively prevent UI flashing"},{default:p(()=>[s(l)]),_:1}),t])}}});export{y as __pageData,i as default}; diff --git a/hooks/assets/en_useRequest_loadingDelay_index.md.907067ef.js b/hooks/assets/en_useRequest_loadingDelay_index.md.907067ef.js new file mode 100644 index 000000000..8b08c690d --- /dev/null +++ b/hooks/assets/en_useRequest_loadingDelay_index.md.907067ef.js @@ -0,0 +1 @@ +import{_ as l}from"./chunks/demo.147a912f.js";import{l as o,o as C,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a('

Loading Delay

By setting options.loadingDelay, you can delay the time when loading turns to true, effectively prevent UI flashing.

Code demonstration

Basic usage

If you hit run quickly, the data without loadingDelay will flash.

',5),t=a('

API

PropertyDescriptionTypeDefault
loadingDelaySet the delay time for loading to become truenumber | Ref<number>0

Remark

options.loadingDelay supports dynamic changes.

Source

Source \u2022 Docs \u2022 Demo

',6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.en-US.md"},"headers":[{"level":2,"title":"Code demonstration","slug":"code-demonstration"},{"level":3,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"Remark","slug":"remark"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"en/useRequest/loadingDelay/index.md"}'),F={name:"en/useRequest/loadingDelay/index.md"},i=Object.assign(F,{setup(A){return(D,r)=>{const n=o("demo");return C(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"effectively prevent UI flashing"},{default:p(()=>[s(l)]),_:1}),t])}}});export{y as __pageData,i as default}; diff --git a/hooks/assets/en_useRequest_loadingDelay_index.md.765ab71b.lean.js b/hooks/assets/en_useRequest_loadingDelay_index.md.907067ef.lean.js similarity index 99% rename from hooks/assets/en_useRequest_loadingDelay_index.md.765ab71b.lean.js rename to hooks/assets/en_useRequest_loadingDelay_index.md.907067ef.lean.js index f41a4a978..1cc158a57 100644 --- a/hooks/assets/en_useRequest_loadingDelay_index.md.765ab71b.lean.js +++ b/hooks/assets/en_useRequest_loadingDelay_index.md.907067ef.lean.js @@ -1 +1 @@ -import{_ as l}from"./chunks/demo.147a912f.js";import{l as o,o as C,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a("",4),t=a("",6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.en-US.md"},"headers":[{"level":2,"title":"Code demonstration","slug":"code-demonstration"},{"level":3,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"Remark","slug":"remark"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"en/useRequest/loadingDelay/index.md"}'),F={name:"en/useRequest/loadingDelay/index.md"},i=Object.assign(F,{setup(A){return(D,r)=>{const n=o("demo");return C(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"effectively prevent UI flashing"},{default:p(()=>[s(l)]),_:1}),t])}}});export{y as __pageData,i as default}; +import{_ as l}from"./chunks/demo.147a912f.js";import{l as o,o as C,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a("",5),t=a("",6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.en-US.md"},"headers":[{"level":2,"title":"Code demonstration","slug":"code-demonstration"},{"level":3,"title":"Basic usage","slug":"basic-usage"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"Remark","slug":"remark"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"en/useRequest/loadingDelay/index.md"}'),F={name:"en/useRequest/loadingDelay/index.md"},i=Object.assign(F,{setup(A){return(D,r)=>{const n=o("demo");return C(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"effectively prevent UI flashing"},{default:p(()=>[s(l)]),_:1}),t])}}});export{y as __pageData,i as default}; diff --git a/hooks/assets/useRequest_loadingDelay_index.md.7b569100.js b/hooks/assets/useRequest_loadingDelay_index.md.7b569100.js deleted file mode 100644 index 80b8b23f0..000000000 --- a/hooks/assets/useRequest_loadingDelay_index.md.7b569100.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as l}from"./chunks/demo.147a912f.js";import{l as C,o,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a('

Loading Delay

\u901A\u8FC7\u8BBE\u7F6E options.loadingDelay \uFF0C\u53EF\u4EE5\u5EF6\u8FDF loading \u53D8\u6210 true \u7684\u65F6\u95F4\uFF0C\u6709\u6548\u9632\u6B62\u95EA\u70C1\u3002

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

',4),F=a('

API

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
loadingDelay\u8BBE\u7F6E loading \u53D8\u6210 true \u7684\u5EF6\u8FDF\u65F6\u95F4number | Ref<number>0

\u5907\u6CE8

options.loadingDelay \u652F\u6301\u52A8\u6001\u53D8\u5316\u3002

Source

\u6E90\u7801 \u2022 \u6587\u6863 \u2022 \u793A\u4F8B

',6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.zh-CN.md"},"headers":[{"level":2,"title":"\u4EE3\u7801\u6F14\u793A","slug":"\u4EE3\u7801\u6F14\u793A"},{"level":3,"title":"\u57FA\u672C\u7528\u6CD5","slug":"\u57FA\u672C\u7528\u6CD5"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"\u5907\u6CE8","slug":"\u5907\u6CE8"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"useRequest/loadingDelay/index.md"}'),t={name:"useRequest/loadingDelay/index.md"},i=Object.assign(t,{setup(A){return(D,r)=>{const n=C("demo");return o(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"\u9632\u6B62\u95EA\u70C1"},{default:p(()=>[s(l)]),_:1}),F])}}});export{y as __pageData,i as default}; diff --git a/hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.js b/hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.js new file mode 100644 index 000000000..0ba183ea3 --- /dev/null +++ b/hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.js @@ -0,0 +1 @@ +import{_ as l}from"./chunks/demo.147a912f.js";import{l as C,o,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a('

Loading Delay

\u901A\u8FC7\u8BBE\u7F6E options.loadingDelay \uFF0C\u53EF\u4EE5\u5EF6\u8FDF loading \u53D8\u6210 true \u7684\u65F6\u95F4\uFF0C\u6709\u6548\u9632\u6B62\u95EA\u70C1\u3002

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

\u5982\u679C\u4F60\u5FEB\u901F\u7684\u70B9\u51FB run, \u6CA1\u4F7F\u7528 loadingDelay \u7684\u6570\u636E\u5C06\u4F1A\u95EA\u70C1\u3002

',5),F=a('

API

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
loadingDelay\u8BBE\u7F6E loading \u53D8\u6210 true \u7684\u5EF6\u8FDF\u65F6\u95F4number | Ref<number>0

\u5907\u6CE8

options.loadingDelay \u652F\u6301\u52A8\u6001\u53D8\u5316\u3002

Source

\u6E90\u7801 \u2022 \u6587\u6863 \u2022 \u793A\u4F8B

',6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.zh-CN.md"},"headers":[{"level":2,"title":"\u4EE3\u7801\u6F14\u793A","slug":"\u4EE3\u7801\u6F14\u793A"},{"level":3,"title":"\u57FA\u672C\u7528\u6CD5","slug":"\u57FA\u672C\u7528\u6CD5"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"\u5907\u6CE8","slug":"\u5907\u6CE8"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"useRequest/loadingDelay/index.md"}'),t={name:"useRequest/loadingDelay/index.md"},i=Object.assign(t,{setup(A){return(D,r)=>{const n=C("demo");return o(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"\u9632\u6B62\u95EA\u70C1"},{default:p(()=>[s(l)]),_:1}),F])}}});export{y as __pageData,i as default}; diff --git a/hooks/assets/useRequest_loadingDelay_index.md.7b569100.lean.js b/hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.lean.js similarity index 99% rename from hooks/assets/useRequest_loadingDelay_index.md.7b569100.lean.js rename to hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.lean.js index 57dd7a89d..2ebb521bf 100644 --- a/hooks/assets/useRequest_loadingDelay_index.md.7b569100.lean.js +++ b/hooks/assets/useRequest_loadingDelay_index.md.a4e71d74.lean.js @@ -1 +1 @@ -import{_ as l}from"./chunks/demo.147a912f.js";import{l as C,o,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a("",4),F=a("",6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.zh-CN.md"},"headers":[{"level":2,"title":"\u4EE3\u7801\u6F14\u793A","slug":"\u4EE3\u7801\u6F14\u793A"},{"level":3,"title":"\u57FA\u672C\u7528\u6CD5","slug":"\u57FA\u672C\u7528\u6CD5"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"\u5907\u6CE8","slug":"\u5907\u6CE8"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"useRequest/loadingDelay/index.md"}'),t={name:"useRequest/loadingDelay/index.md"},i=Object.assign(t,{setup(A){return(D,r)=>{const n=C("demo");return o(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"\u9632\u6B62\u95EA\u70C1"},{default:p(()=>[s(l)]),_:1}),F])}}});export{y as __pageData,i as default}; +import{_ as l}from"./chunks/demo.147a912f.js";import{l as C,o,c as E,a as s,w as p,b as a}from"./app.a038a21c.js";const e=a("",5),F=a("",6),y=JSON.parse('{"title":"Loading Delay","description":"","frontmatter":{"map":{"path":"/useRequest/loadingDelay/"},"source":{"path":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts","demoPath":"https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue"},"realPath":"src/useRequest/docs/loadingDelay/index.zh-CN.md"},"headers":[{"level":2,"title":"\u4EE3\u7801\u6F14\u793A","slug":"\u4EE3\u7801\u6F14\u793A"},{"level":3,"title":"\u57FA\u672C\u7528\u6CD5","slug":"\u57FA\u672C\u7528\u6CD5"},{"level":2,"title":"API","slug":"api"},{"level":2,"title":"\u5907\u6CE8","slug":"\u5907\u6CE8"},{"level":2,"title":"Source","slug":"source"}],"relativePath":"useRequest/loadingDelay/index.md"}'),t={name:"useRequest/loadingDelay/index.md"},i=Object.assign(t,{setup(A){return(D,r)=>{const n=C("demo");return o(),E("div",null,[e,s(n,{code:"%3Ctemplate%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading%20%3F%20'loading'%20%3A%20data%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cdiv%3EUsername%EF%BC%9A%7B%7B%20loading1%20%3F%20'loading...'%20%3A%20data1%20%7D%7D%3C%2Fdiv%3E%0A%20%20%3Cvhp-button%20%40click%3D%22run%22%3Erun%3C%2Fvhp-button%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%20import%20%7B%20useRequest%20%7D%20from%20'vue-hooks-plus'%0A%0A%20%20function%20getUsername()%3A%20Promise%3Cstring%3E%20%7B%0A%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20resolve(%60vue-hooks-plus%20useRequest%20A%20%24%7Bnew%20Date().getTime()%7D%60)%0A%20%20%20%20%20%20%7D%2C%201)%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20%20const%20%7B%20data%2C%20loading%2C%20run%3A%20runData%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername())%0A%20%20const%20%7B%20data%3A%20data1%2C%20loading%3A%20loading1%2C%20run%3A%20runData1%20%7D%20%3D%20useRequest(()%20%3D%3E%20getUsername()%2C%20%7B%0A%20%20%20%20loadingDelay%3A%20300%2C%0A%20%20%7D)%0A%0A%20%20const%20run%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20runData()%0A%20%20%20%20runData1()%0A%20%20%7D%0A%3C%2Fscript%3E%0A",highlightedCode:"%3Cpre%20v-pre%20class%3D%22vp-code-dark%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%3B%20font-style%3A%20italic%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60vue-hooks-plus%20useRequest%20A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%7D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2398C379%22%3E%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E5C07B%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3EloadingDelay%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23D19A66%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2356B6C2%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23C678DD%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2361AFEF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23E06C75%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23ABB2BF%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E%3Cpre%20v-pre%20class%3D%22vp-code-light%22%3E%3Ccode%3E%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3BUsername%EF%BC%9A%7B%7B%20loading1%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bloading...%26%2339%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20data1%20%7D%7D%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Ediv%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%40%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eclick%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3Brun%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Evhp-button%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Etemplate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Elang%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26quot%3Bts%26quot%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Esetup%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Eimport%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20useRequest%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efrom%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%26%2339%3Bvue-hooks-plus%26%2339%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Efunction%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3A%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Estring%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Ereturn%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EPromise%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EsetTimeout%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Eresolve%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%60vue-hooks-plus%20useRequest%20A%20%24%7B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Enew%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3EDate%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E().%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetTime%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E()%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230A3069%22%3E%7D%60%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%20%20%7D%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E())%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Edata%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Edata1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Eloading%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3Eloading1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23953800%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7D%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EuseRequest%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E(()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3EgetUsername%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%2C%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20loadingDelay%3A%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%230550AE%22%3E300%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%2C%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D)%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3Econst%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3Erun%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20()%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23CF222E%22%3E%3D%26gt%3B%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%7B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%20%20%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%238250DF%22%3ErunData1%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E()%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%20%20%7D%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26lt%3B%2F%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%23116329%22%3Escript%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20%2324292F%22%3E%26gt%3B%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cspan%20class%3D%22line%22%3E%3C%2Fspan%3E%3C%2Fcode%3E%3C%2Fpre%3E",src:"/Users/yangjie/WebCode/npm\u5E93/vue-hooks-plus/vue-hooks-plus/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue",title:"",desc:"\u9632\u6B62\u95EA\u70C1"},{default:p(()=>[s(l)]),_:1}),F])}}});export{y as __pageData,i as default}; diff --git a/hooks/en/guide/index.html b/hooks/en/guide/index.html index 47e5e68f6..16296fe3d 100644 --- a/hooks/en/guide/index.html +++ b/hooks/en/guide/index.html @@ -74,7 +74,7 @@ ], }

For other supported tools, please see unplugin-auto-import


🧩 Compatible

Not compatible with vue2 version

- + diff --git a/hooks/en/index.html b/hooks/en/index.html index 632d55356..231185979 100644 --- a/hooks/en/index.html +++ b/hooks/en/index.html @@ -18,7 +18,7 @@
Skip to content
vue-hooks-plus

VueHooks
Plus

Get Started

🛸 Hooks for vue3

Contains a comprehensive collection of basic Hooks.

🏄🏼‍♂️ Easy to learn and use

Simple language and easy-to-use features, easy to use, detailed documentation.

🎯 TypeScript

Written in TypeScript with predictable static types.

🎪 Interactive demo

Interactive demo, immersive.

🔋 Support SSR

Friendly support for server-side rendering.

🦾 useRequest

Preferred useRequest, Powerful request middle tier.

🤺 Playground

there's ample scope for one's abilities.

🧩 On-demand load

Take what you want, the package is smaller.

🔐 Safe

Perfect test, safe and reliable.

Demo.vue
- + diff --git a/hooks/en/migrate/index.html b/hooks/en/migrate/index.html index 8dcab88bf..cf2831a78 100644 --- a/hooks/en/migrate/index.html +++ b/hooks/en/migrate/index.html @@ -53,7 +53,7 @@ [useFormatterPlugin, ...otherPlugins], )

Just migrate it to pluginOptions based on the original plugin option.

- + diff --git a/hooks/en/onlineTeaching/index.html b/hooks/en/onlineTeaching/index.html index 11229412e..d44977a90 100644 --- a/hooks/en/onlineTeaching/index.html +++ b/hooks/en/onlineTeaching/index.html @@ -17,7 +17,7 @@
Skip to content
- + diff --git a/hooks/en/useAsyncOrder/index.html b/hooks/en/useAsyncOrder/index.html index 28921de51..de2816191 100644 --- a/hooks/en/useAsyncOrder/index.html +++ b/hooks/en/useAsyncOrder/index.html @@ -42,7 +42,7 @@ onError?: (err: unknown) => void }})

Params

PropertyDescriptionType
taskaynchronous task order queue((resolve?: Resolve,reject?: InterruptibleRejectType,index?: number) => void)[]
optionoption-

Option

PropertyDescriptionType
delayDelay executionnumber
onReadyPreparation phase callbackvoid
onSuccessSuccessful callback(result: unknown) => void
onErrorError callback(err: unknown) => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useBoolean/index.html b/hooks/en/useBoolean/index.html index 3698420eb..390c79752 100644 --- a/hooks/en/useBoolean/index.html +++ b/hooks/en/useBoolean/index.html @@ -24,7 +24,7 @@ defaultValue? : boolean, );

Params

PropertyDescriptionTypeDefault
defaultValueThe default value of the state. Optional.booleanfalse

Result

PropertyDescriptionType
stateCurrent valueReadonly<Ref<boolean>>
actionsA set of methods to update state valueActions

Actions

PropertyDescriptionType
toggleToggle state() => void
setSet state(value: boolean) => void
setTrueSet state to true() => void
setFalseSet state to false() => void
- + diff --git a/hooks/en/useCookieState/index.html b/hooks/en/useCookieState/index.html index 0a0ff6ee5..f3ca4528c 100644 --- a/hooks/en/useCookieState/index.html +++ b/hooks/en/useCookieState/index.html @@ -36,7 +36,7 @@ options?: Options, );

Note

If you want to remove this data from the document.cookie, use the setState() or setState (undefined).

Params

PropertyDescriptionTypeDefault
cookieKeyThe key of Cookiestring-
optionsOptional. Cookie configurationOptions-

Result

PropertyDescriptionType
stateLocal Cookie valueReadonly<Ref<string>> | undefined
setStateUpdate Cookie valueSetState

setState can update cookie options, which will be merged with the options set by useCookieState

const targetOptions = { ...options, ...updateOptions }

Options

PropertyDescriptionTypeDefault
defaultValueOptional. Default value, but not store to Cookiestring | undefined | (() => (string | undefined))undefined
expiresOptional. Set Cookie expiration timenumber | Date-
pathOptional. Specify available pathsstring/
domainOptional. Specify available domain. Default creation domainstring-
secureOptional. Specify whether the Cookie can only be transmitted over secure protocol as httpsbooleanfalse
sameSiteOptional. Specify whether the browser can send this Cookie along with cross-site requestsstrict | lax | none-

Options is same as js-cookie attributes

Source

SourceDocsDemo

- + diff --git a/hooks/en/useCounter/index.html b/hooks/en/useCounter/index.html index 6ac7508e4..781fb412f 100644 --- a/hooks/en/useCounter/index.html +++ b/hooks/en/useCounter/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useCounter

A hook that manage counter.

Code demonstration

API

const [current, { inc, dec, set, reset }] = useCounter(initialValue, { min, max })
 
const [current, { inc, dec, set, reset }] = useCounter(initialValue, { min, max })
 

Result

PropertyDescriptionType
currentCurrent valueReadonly<Ref<number>>
incIncrement, default delta is 1(delta?: number) => void
decDecrement, default delta is 1(delta?: number) => void
setSet current value(value: number | ((c: number) => number)) => void
resetReset current value to initial value() => void

Params

PropertyDescriptionTypeDefault
initialValueInitial countnumber0
minMin countnumber-
maxMax countnumber-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useDarkMode/index.html b/hooks/en/useDarkMode/index.html index 2fd18aea7..dfed82b9d 100644 --- a/hooks/en/useDarkMode/index.html +++ b/hooks/en/useDarkMode/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useDarkMode

Hook using Dark mode.

Code demonstration

API

const [darkMode, setDarkMode] = useDarkMode()
 
const [darkMode, setDarkMode] = useDarkMode()
 

Result

PropertyDescriptionType
darkModeIs it in dark modeComputedRef<boolean>
setDarkModeSet the dark mode, and the undefined is the following systemboolean | undefined

Source

SourceDocsDemo

- + diff --git a/hooks/en/useDebounce/index.html b/hooks/en/useDebounce/index.html index 36b5f4806..78fc456f2 100644 --- a/hooks/en/useDebounce/index.html +++ b/hooks/en/useDebounce/index.html @@ -26,7 +26,7 @@ options?: Options );

Params

PropertyDescriptionTypeDefault
valueThe value to debounce.Ref<any>-
optionsConfig for the debounce behaviors.Options-

Options

PropertyDescriptionTypeDefault
waitThe number of milliseconds to delay.number1000
leadingSpecify invoking on the leading edge of the timeout.booleanfalse
trailingSpecify invoking on the trailing edge of the timeout.booleantrue
maxWaitThe maximum time func is allowed to be delayed before it’s invoked.number-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useDebounceFn/index.html b/hooks/en/useDebounceFn/index.html index 94f26b14e..c6514ac12 100644 --- a/hooks/en/useDebounceFn/index.html +++ b/hooks/en/useDebounceFn/index.html @@ -34,7 +34,7 @@ options?: Options );

Params

PropertyDescriptionTypeDefault
fnThe function to debounce.(...args: any[]) => any-
optionsConfig for the debounce behaviors.Options-

Options

PropertyDescriptionTypeDefault
waitThe number of milliseconds to delay.number1000
leadingSpecify invoking on the leading edge of the timeout.booleanfalse
trailingSpecify invoking on the trailing edge of the timeout.booleantrue
maxWaitThe maximum time func is allowed to be delayed before it’s invoked.number-

Result

PropertyDescriptionType
runInvode and pass parameters to fn.(...args: any[]) => any
cancelCancel the invocation of currently debounced function.() => void
flushImmediately invoke currently debounced function.() => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useDrop/index.html b/hooks/en/useDrop/index.html index 2f002f714..8bc84501b 100644 --- a/hooks/en/useDrop/index.html +++ b/hooks/en/useDrop/index.html @@ -36,7 +36,7 @@ options?: DropOptions );

Params

参数DescriptionTypeDefault
targetDOM element or ref() => Element | Element | MutableRefObject<Element>-
optionsMore configDragOptions-

DropOptions

参数DescriptionTypeDefault
onTextThe callback when text is dropped or pasted(text: string, e: DragEvent) => void-
onFilesThe callback when file is dropped or pasted(files: File[], e: DragEvent) => void-
onUrlThe callback when uri is dropped or pasted(text: string, e: DragEvent) => void-
onDomThe callback when DOM is dropped or pasted(content: any, e: DragEvent) => void-
onDropThe callback when any is dropped(e: DragEvent) => void-
onPasteThe callback when any is pasted(e: DragEvent) => void-
onDragEnterOn drag enter callback(e: DragEvent) => void-
onDragOverOn drag over callback(e: DragEvent) => void-
onDragLeaveOn drag leave callback(e: DragEvent) => void-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useElementBounding/index.html b/hooks/en/useElementBounding/index.html index 284b0a573..fab630b10 100644 --- a/hooks/en/useElementBounding/index.html +++ b/hooks/en/useElementBounding/index.html @@ -30,7 +30,7 @@ immediate?: boolean })

Params

PropertyDescriptionTypeDefault
targetDOM element or ref() => Element | Element | JSX.Element-
optionsMore configUseElementBoundingOptions-

Options

参数说明类型默认值
resetWhen the component is mounted, initialize all values to 0booleantrue
windowResizeMonitor window size changesbooleantrue
windowScrollMonitor window scrolling changesbooleantrue
immediateExecuted immediately when the component is mountedbooleantrue

Source

SourceDocsDemo

- + diff --git a/hooks/en/useEventEmitter/index.html b/hooks/en/useEventEmitter/index.html index 26b6bec1a..085cc6707 100644 --- a/hooks/en/useEventEmitter/index.html +++ b/hooks/en/useEventEmitter/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useEventEmitter

Sometimes it is difficult to pass events between multiple components. By using EventEmitter, this can be simplified.

To get an instance of EventEmitter, you can call useEventEmitter in React components.

If the component renders multiple times, the return value of useEventEmitter in every render process will stay unchanged and no extra EventEmitter instance will be created.

You can also create instances of the global sharing.

Code demonstration

API

const event = useEventEmitter<T>()
 
const event = useEventEmitter<T>()
 

Params

PropertyDescriptionTypeDefault
globalIs it globalbooleanfalse

Result

PropertyDescriptionType
emitSend an event notification(eventName?:string,val: T) => void
useSubscriptionSubscribe to the event(eventName?:string,callback: (val: T) => void) => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useEventListener/index.html b/hooks/en/useEventListener/index.html index ef7653cd1..59b8ccfd1 100644 --- a/hooks/en/useEventListener/index.html +++ b/hooks/en/useEventListener/index.html @@ -28,7 +28,7 @@ options?: Options, );

Params

PropertyDescriptiontypedefault
eventNameEvent namestring-
handlerCallback function(ev: Event) => void-
optionsMore options(optional)Options-

Options

PropertyDescriptiontypedefault
targetDOM element or ref(() => Element) | Element | React.MutableRefObject<Element> | Window | Documentwindow
captureOptional, a Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.booleanfalse
onceOptional, A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.booleanfalse
passiveOptional, A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning.boolean

Source

SourceDocsDemo

- + diff --git a/hooks/en/useExternal/index.html b/hooks/en/useExternal/index.html index 347f8a6c6..5cc7a943c 100644 --- a/hooks/en/useExternal/index.html +++ b/hooks/en/useExternal/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useExternal

Dynamically load JS or CSS, useExternal can ensure that the resource are globally unique.

Code demonstration

Basic Usage

Load CSS

API

const status = useExternal(path: string, options?: Options);
 
const status = useExternal(path: string, options?: Options);
 

Params

PropertyDescriptionTypeDefault
pathThe url of the external resourcesstring-

Result

PropertyDescriptionType
statusThe progress of loading the external resources, support unset, loading, ready, errorReadonly<Ref<UseExternalStatus>>

Options

PropertyDescriptionTypeDefault
typeThe type of extarnal resources which need to load, support js/css, if no type, it will deduced according to pathstring-
jsAttributes supported by scriptHTMLScriptElement-
cssAttributes supported by linkHTMLStyleElement-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useFavicon/index.html b/hooks/en/useFavicon/index.html index 6a38855ad..3b5ad798a 100644 --- a/hooks/en/useFavicon/index.html +++ b/hooks/en/useFavicon/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useFavicon

A hook that set the favicon of the page.

Code demonstration

API

useFavicon(href: string);
 
useFavicon(href: string);
 

Params

PropertyDescriptionTypeDefault
hreffavicon URL, support svg/png/ico/gif 后缀的图片Ref<string>-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useFetchs/index.html b/hooks/en/useFetchs/index.html index 538c2c29a..f8ffa50c8 100644 --- a/hooks/en/useFetchs/index.html +++ b/hooks/en/useFetchs/index.html @@ -24,7 +24,7 @@ fetchKey: params => string | number, })

Result

参数说明类型默认值
fetchsStatus of all requests collectedReadonly<FetchType<TData, TParams>>-
fetchRunFunctions that you need to run(...args) => void-

Params

参数说明类型默认值
serviceService functionUseRequestService<TData, ParamsType<TParams>>-
optionsAdditional Configuration ItemsuseRequest Options-
selfself options fetchKey(...args: ParamsType<TParams>) => string-

Options

Referring to the option of useRequest, note that fetchRun needs to be true in manual mode

PropertyDescriptionType
fetchKeyGet key, cacheKey for useRequest(...args) => string | number

Source

SourceDocsDemo

- + diff --git a/hooks/en/useFocusWithin/index.html b/hooks/en/useFocusWithin/index.html index 6e117526f..f63639d7b 100644 --- a/hooks/en/useFocusWithin/index.html +++ b/hooks/en/useFocusWithin/index.html @@ -28,7 +28,7 @@ onChange, })

Params

PropertyDescriptionTypeDefault
targetDOM element or ref() => Element | Element | JSX.Element-
optionsMore configOptions-

Options

PropertyDescriptionTypeDefault
onFocusCallback to be executed on focus(e: FocusEvent) => void-
onBlurCallback to be executed on blur(e: FocusEvent) => void-
onChangeCallback to be executed on focus change(isFocusWithin: boolean) => void-

Result

PropertyDescriptionType
isFocusWithinWhether the focus is in the current areaRef<boolean>

Source

SourceDocsDemo

- + diff --git a/hooks/en/useFormatResult/index.html b/hooks/en/useFormatResult/index.html index 17571bb8a..78747ec5f 100644 --- a/hooks/en/useFormatResult/index.html +++ b/hooks/en/useFormatResult/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useFormatResult

Format the data of hook.

Code demonstration

API

const formatData = useFormatResult(data, callback)
 
const formatData = useFormatResult(data, callback)
 

Argument

PropertyDescriptionTypeDefault
dataData that needs to be formattedTData\|Ref<TData>-
callbackFormatt function(data: TData) => FData-

Result

PropertyDescriptionType
formatDataThe formatted dataComputedRef<FData> | FData

Source

SourceDocsDemo

- + diff --git a/hooks/en/useFull/index.html b/hooks/en/useFull/index.html index 84274c893..85d431474 100644 --- a/hooks/en/useFull/index.html +++ b/hooks/en/useFull/index.html @@ -40,7 +40,7 @@ options?: Options );

Params

PropertyDescriptionType
targetDOM element or refElement
optionSettingOptions

Options

PropertyDescriptionTypeDefault
onExitExit full screen trigger() => void-
onEnterEnter full screen trigger() => void-
defaultElementDefault full screen elementElement | HTMLElementhtml

Result

PropertyDescriptionType
isFullscrenIs full screenReadonly<Ref<boolean>>
enterFullscreenEnter full screen() => void
exitFullscreenExit full screen() => void
toggleFullscreenToggle full screen() => void
isEnabledIs enable screenfullboolean

Source

SourceDocsDemo

- + diff --git a/hooks/en/useHover/index.html b/hooks/en/useHover/index.html index 44deb2c04..b8cbef6cc 100644 --- a/hooks/en/useHover/index.html +++ b/hooks/en/useHover/index.html @@ -28,7 +28,7 @@ onChange, })

Params

PropertyDescriptionTypeDefault
targetDOM element or ref() => Element | Element | JSX.Element-
optionsMore configOptions-

Options

PropertyDescriptionTypeDefault
onEnterCallback to be executed on mouse hover() => void-
onLeaveCallback to be executed on mouse leave() => void-
onChangeCallback to be executed on hover change(isHovering: boolean) => void-

Result

PropertyDescriptionType
isHoveringWhether the element is being hoveredReadonly<Ref<boolean>>

Source

SourceDocsDemo

- + diff --git a/hooks/en/useImmer/index.html b/hooks/en/useImmer/index.html index 087bf4faf..d61b6e58e 100644 --- a/hooks/en/useImmer/index.html +++ b/hooks/en/useImmer/index.html @@ -26,7 +26,7 @@

Auto Import

import { VueHooksPlusUseImmerResolver } from '@vue-hooks-plus/resolvers'
 
import { VueHooksPlusUseImmerResolver } from '@vue-hooks-plus/resolvers'
 

How to use

The hook is based on immer management status, immer will be installed to ensure normal work in the project

Independent installation @vue-hooks-plus/use-immer

Basic Usage

Params

PropertyDescriptionTypeDefault
stateShallowRefReadonly<ShallowRef<S>>-
updater-Updater<S>-

Options

参数说明类型默认值
initialValue-() => voidany

Source

SourceDocsDemo

- + diff --git a/hooks/en/useInViewport/index.html b/hooks/en/useInViewport/index.html index 977628fd7..515da137b 100644 --- a/hooks/en/useInViewport/index.html +++ b/hooks/en/useInViewport/index.html @@ -26,7 +26,7 @@ options?: Options );

Params

PropertyDescriptionTypeDefault
targetDOM element or refElement | () => Element | MutableRefObject<Element>-
optionsSettingOptions-

Options

More information refer to Intersection Observer API

PropertyDescriptionTypeDefault
thresholdEither a single number or an array of numbers which indicate at what percentage of the target's visibility the ratio should be executednumber | number[]-
rootMarginMargin around the rootstring-
rootThe element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.Element | Document | () => (Element/Document) | MutableRefObject<Element>-

Result

PropertyDescriptionType
inViewportIs visibleReadonly<Ref<boolean>> | undefined
ratioCurrent visible ratio, updated every time the node set by options.threshold is reachedReadonly<Ref<number>> | undefined

Source

SourceDocsDemo

- + diff --git a/hooks/en/useInfiniteScroll/index.html b/hooks/en/useInfiniteScroll/index.html index a64fb6616..e93ee4664 100644 --- a/hooks/en/useInfiniteScroll/index.html +++ b/hooks/en/useInfiniteScroll/index.html @@ -76,7 +76,7 @@ } );

Result

PropertyDescriptionType
dataThe data returned by the service, where the list attribute is the aggregated dataReadonly<Ref<TData>> | undefined
loadingIs the first request in progressComputedRef<boolean>
loadingMoreIs more data request in progressReadonly<Ref<boolean>>
noMoreWhether there is no more data, it will take effect after configuring options.isNoMoreComputedRef<boolean>
loadMoreLoad more data, it will automatically catch the exception, and handle it through options.onError() => void
loadMoreAsyncLoad more data, which is consistent with the behavior of loadMore, but returns Promise, so you need to handle the exception yourself() => Promise<TData>
reloadLoad the first page of data, it will automatically catch the exception, and handle it through options.onError() => void
reloadAsyncLoad the first page of data, which is consistent with the behavior of reload, but returns Promise, so you need to handle the exception yourself() => Promise<TData>
mutateModify data directly(data?: TData) => void
cancelIgnore the current Promise response() => void

Options

PropertyDescriptionTypeDefault
targetspecifies the parent element. If it exists, it will trigger the loadMore when scrolling to the bottom. Needs to work with isNoMore to know when there is no more data to load() => Element | Element | MutableRefObject<Element>-
isNoMoredetermines if there is no more data, the input parameter is the latest merged data(data?: TData) => boolean-
thresholdThe pixel threshold to the bottom for the scrolling to loadnumber100
reloadDepsWhen the content of the array changes, reload will be triggeredWatchSource | any[] |any-
manual
  • The default is false. That is, the service is automatically executed during initialization.
  • If set to true, you need to manually call run or runAsync to trigger execution
booleanfalse
onBeforeTriggered before service execution() => void-
onSuccessTriggered when service resolve(data: TData) => void-
onErrorTriggered when service reject(e: Error) => void-
onFinallyTriggered when service execution is complete(data?: TData, e?: Error) => void-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useInterval/index.html b/hooks/en/useInterval/index.html index bbc0d2c50..6db3b7f89 100644 --- a/hooks/en/useInterval/index.html +++ b/hooks/en/useInterval/index.html @@ -28,7 +28,7 @@ options?: Options ): fn: () => void;

Params

PropertyDescriptionType
fnThe function to be executed every delay milliseconds.() => void
delayThe time in milliseconds, the timer should delay in between executions of the specified function. The timer will be cancelled if delay is set to undefined.Ref<number>|number | undefined
optionsConfig of the interval behavior.Options

Options

PropertyDescriptionTypeDefault
immediateWhether the function should be executed immediately on first execution.booleanfalse

Result

PropertyDescriptionType
clearIntervalclear interval() => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useKeyPress/index.html b/hooks/en/useKeyPress/index.html index 5094abae4..19e7e68fb 100644 --- a/hooks/en/useKeyPress/index.html +++ b/hooks/en/useKeyPress/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useKeyPress

Listen for the keyboard press, support key combinations, and support alias.

Basic usage

Combination keys

Exact match

API

const state = useKeyPress(target?: Target);
 
const state = useKeyPress(target?: Target);
 

Params

PropertyDescriptionType
keyFilterSupport keyCode、alias、combination keys、array、custom functionNumber | String | Number[]| String[] |(event: KeyboardEvent) => boolean
eventHandlerCallback function(event: KeyboardEvent) => void
optionadvanced optionsOptions

Options

PropertyDescriptionTypeDefault
eventsTrigger EventsEventListenerOrEventListenerObject-
targetDOM element or refHTMLElement | Document | Window-
exactMatchExact match. If set true, the event will only be trigger when the keys match exactly. For example, pressing [shif + c] will not trigger [c]Boolean-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useLocalStorageState/index.html b/hooks/en/useLocalStorageState/index.html index 61f14bfa7..5d71fae00 100644 --- a/hooks/en/useLocalStorageState/index.html +++ b/hooks/en/useLocalStorageState/index.html @@ -36,7 +36,7 @@ options: Options<T> ): [T?, (value?: T | ((previousState: T) => T)) => void];

Options

PropertyDescriptionTypeDefault
defaultValueDefault valueany | (() => any)-
serializerCustom serialization method(value: any) => stringJSON.stringify
deserializerCustom deserialization method(value: string) => anyJSON.parse

Result

PropertyDescriptionType
stateLocal Storage-valueRef<any | undefined>
setStateSet Storage valueSetState

Remark

useLocalStorageState will call serializer before write data to localStorage, and call deserializer once after read data.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useLockFn/index.html b/hooks/en/useLockFn/index.html index beba3d6c2..5913e5fbe 100644 --- a/hooks/en/useLockFn/index.html +++ b/hooks/en/useLockFn/index.html @@ -24,7 +24,7 @@ fn: (...args: P) => Promise<V> ): fn: (...args: P) => Promise<V | undefined>;

Result

PropertyDescriptionType
fnThe async function with lock(...args: any[]) => Promise<any>

Params

PropertyDescriptionTypeDefault
fnAn async function(...args: any[]) => Promise<any>-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useLongPress/index.html b/hooks/en/useLongPress/index.html index abe5f1a32..cb0b53e0f 100644 --- a/hooks/en/useLongPress/index.html +++ b/hooks/en/useLongPress/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useLongPress

Listen for a long press on an element.

Code demonstration

API

const { isPressing , pressingTime } = useLongPress(target: BasicTarget , options?: LongPressOptions)
 
const { isPressing , pressingTime } = useLongPress(target: BasicTarget , options?: LongPressOptions)
 

Result

PropertyDescriptionType
isPressingIndicates the current pressing state. If pressing, the value is true; otherwise it's false.Readonly<Ref<boolean>>
pressingTimeRepresents the duration of pressing (possibly in milliseconds). This value will only be updated during the pressing period.Readonly<Ref<number>>

Params

PropertyDescriptionTypeDefault
targetDOM element or ref() => Element | Element | MutableRefObject<Element>-
optionsAdditional configUseLongPressOptions-

DropOptions

PropertyDescriptionTypeDefault
delayTime in ms till longpress gets callednumber500
minUpdateTimeMinimum time interval in ms for updating the longpress eventnumber100
cancelOnMoveWhether to cancel the longpress event when mouse movebooleantrue
modifierslongpress event modifiersLongPressModifiers-

LongPressModifiers

PropertyDescriptionTypeDefault
stopstopPropagation eventboolean-
onceeventListener once optionboolean-
preventpreventDefault eventboolean-
captureeventListener capture optionboolean-
selfcheck event target element same as selfboolean-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useMap/index.html b/hooks/en/useMap/index.html index 6b83d3f49..5245c999d 100644 --- a/hooks/en/useMap/index.html +++ b/hooks/en/useMap/index.html @@ -38,7 +38,7 @@ } ] = useMap(initialValue?: Iterable<[any, any]>);

Result

PropertyDescriptionType
mapMap objectReadonly<Ref<Map>>
setAdd item(key: any, value: any) => void
getGet item(key: any) => MapItem
setAllSet a new Map(newMap: Iterable<[any, any]>) => void
removeRemove key(key: any) => void
resetReset to default() => void
clearclear Map() => void

Params

PropertyDescriptionTypeDefault
initialValueOptional, set default valueIterable<[any, any]>-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useMedia/index.html b/hooks/en/useMedia/index.html index cf5ee9cca..4fa9081d9 100644 --- a/hooks/en/useMedia/index.html +++ b/hooks/en/useMedia/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useMedia

Hook using media queries.

Code demonstration

API

const value = useMedia(['(min-width: 320px)'], [true], false)
 
const value = useMedia(['(min-width: 320px)'], [true], false)
 

Options

PropertyDescriptionTypeDefault
queriesMedia to query for an array of objectsstring[]-
valuesThe default value for each media query objectboolean[]-
defaultValueDefaultValueboolean

Result

PropertyDescriptionType
valueCompliance with the queryReadonly<Ref<boolean>>

Source

SourceDocsDemo

- + diff --git a/hooks/en/useMouse/index.html b/hooks/en/useMouse/index.html index 47c70b1ca..789c6e22c 100644 --- a/hooks/en/useMouse/index.html +++ b/hooks/en/useMouse/index.html @@ -46,7 +46,7 @@ elementPosY: number, } = useMouse(target?: Target);

Params

PropertyDescriptionType
targetDOM element or refElement | () => Element | JSX.Element

Result

PropertyDescriptionType
screenXPosition left relative to the top left of the physical screen/monitornumber
screenYPosition top relative to the top left of the physical screen/monitornumber
clientXPosition left relative to the upper left edge of the content areanumber
clientYPosition top relative to the upper left edge of the content areanumber
pageXPosition left relative to the top left of the fully rendered content area in the browsernumber
pageYPosition top relative to the top left of the fully rendered content area in the browsernumber
elementXPosition left relative to the upper left edge of the target elementnumber
elementYPosition top relative to the upper left edge of the target elementnumber
elementHTarget element heightnumber
elementWTarget element widthnumber
elementPosXThe position of the target element left relative to the top left of the fully rendered content area in the browsernumber
elementPosYThe position of the target element top relative to the top left of the fully rendered content area in the browsernumber

Source

SourceDocsDemo

- + diff --git a/hooks/en/useMutationObserver/index.html b/hooks/en/useMutationObserver/index.html index 51c75e0f6..b54df8516 100644 --- a/hooks/en/useMutationObserver/index.html +++ b/hooks/en/useMutationObserver/index.html @@ -28,7 +28,7 @@ options?: MutationObserverInit, );

Params

PropertyDescriptionTypeDefault
targetDOM element or ref() => Element | Element | MutableRefObject<Element>-
callbackThe callback function(mutations: MutationRecord[], observer: MutationObserver) => void-
optionsSettingMutationObserverInit-

Options

For options, please refer to MutationObserver

Source

SourceDocsDemo

- + diff --git a/hooks/en/useNetwork/index.html b/hooks/en/useNetwork/index.html index 076b23360..6aa7ca2bf 100644 --- a/hooks/en/useNetwork/index.html +++ b/hooks/en/useNetwork/index.html @@ -40,7 +40,7 @@ } const result: NetworkState = useNetwork()

Result

PropertyDescriptionType
onlineWhether connected to networkboolean
sinceonline latest update timeDate
rttThe effective round-trip time estimate in millisecondsnumber
typeThe connection type that the user agent is usingbluetooth | cellular | ethernet | none | wifi | wimax | other | unknown
downlinkThe effective bandwidth estimate in megabits per second,number
downlinkMaxAn upper bound on the downlink speed of the first network hopnumber
saveDataWhether the user agent has set the option to reduce data usageboolean
effectiveTypeThe effective connection typeslow-2g | 2g | 3g | 4g

Source

SourceDocsDemo

- + diff --git a/hooks/en/usePreview/index.html b/hooks/en/usePreview/index.html index e47c476c2..5020d4ba5 100644 --- a/hooks/en/usePreview/index.html +++ b/hooks/en/usePreview/index.html @@ -85,7 +85,7 @@

API

const { container } = usePreview(target)
 
const { container } = usePreview(target)
 

Params

PropertyDescriptionType
targetDOM element or refVueComponent | string | JSX.Element

Result

PropertyDescriptionType
containerDOM element or refElement | () => Element | JSX.Element

Source

SourceDocsDemo

- + diff --git a/hooks/en/usePrevious/index.html b/hooks/en/usePrevious/index.html index de55eb158..5f7185ba2 100644 --- a/hooks/en/usePrevious/index.html +++ b/hooks/en/usePrevious/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

usePrevious

A Hook to return the previous state.

Basic usage

Custom shouldUpdate function

Result

PropertyDescriptionType
previousRefThe previous valueReadonly<Ref<T>>

Params

PropertyDescriptionTypeDefault Value
currentRefThe state that needs to be trackedRef<T> | ComputedRef<T>-
shouldUpdateOptional. Customize whether the state value should be updated(prev: T | undefined, next: T) => boolean(a, b) => a !== b

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/basic/index.html b/hooks/en/useRequest/basic/index.html index c86587136..4f29f6928 100644 --- a/hooks/en/useRequest/basic/index.html +++ b/hooks/en/useRequest/basic/index.html @@ -92,7 +92,7 @@ } );

Result

PropertyDescriptionType
dataData returned by serviceReadonly<Ref<TData>> | undefined
errorException thrown by serviceReadonly<Ref<Error>> | undefined
loadingIs the service being executedReadonly<Ref<boolean>>
paramsAn array of parameters for the service being executed. For example, you triggered run(1, 2, 3), then params is equal to [1, 2, 3]Readonly<Ref<TParams | []>>
run
  • Manually trigger the execution of the service, and the parameters will be passed to the service
  • Automatic handling of exceptions, feedback through onError
(...params: TParams) => void
runAsyncThe usage is the same as run, but it returns a Promise, so you need to handle the exception yourself.(...params: TParams) => Promise<TData>
refreshUse the last params, call run again() => void
refreshAsyncUse the last params, call runAsync again() => Promise<TData>
mutateMutate data directly(data?: TData | ((oldData?: TData) => (TData | undefined))) => void
cancelIgnore the current promise response() => void

Options

PropertyDescriptionTypeDefault
initialDataInit dataTData | undefined
manual
  • The default is false. That is, the service is automatically executed during initialization.
  • If set to true, you need to manually call run or runAsync to trigger execution.
booleanfalse
defaultParamsThe parameters passed to the service at the first default executionTParams-
formatResultFormat the request results,v1 which recommend to use useFormatResult(response: TData) => FormatData-
onBeforeTriggered before service execution(params: TParams) => void-
onSuccessTriggered when service resolve(data: TData, params: TParams) => void-
onErrorTriggered when service reject(e: Error, params: TParams) => void-
onFinallyTriggered when service execution is complete(params: TParams, data?: TData, e?: Error) => void-

🛸 PRO

Above we have introduced the most basic functionalities of useRequest, and then we will introduce some more advanced functionalities.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/cache/index.html b/hooks/en/useRequest/cache/index.html index d158862ad..8c5d41523 100644 --- a/hooks/en/useRequest/cache/index.html +++ b/hooks/en/useRequest/cache/index.html @@ -32,7 +32,7 @@
import { clearCache } from 'vue-hooks-plus/es/useRequest';
 clearCache(cacheKey?: string | string[]);
 
  1. Support clearing a single cache, or a group of caches
  2. If cacheKey is empty, all cached data will be cleared

Remark

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/debounce/index.html b/hooks/en/useRequest/debounce/index.html index 11be45884..bd4ffdd72 100644 --- a/hooks/en/useRequest/debounce/index.html +++ b/hooks/en/useRequest/debounce/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

Debounce

Enter the debounce mode by setting options.debounceWait. At this time, if run or runAsync is triggered frequently, the request will be executed with the debounce strategy.

Code demonstration

Options

The usage and effect of all debounce property are the same as lodash.debounce

PropertyDescriptionTypeDefault Value
debounceWaitDebounce delay time, in milliseconds. After setting, enter the debounce modenumber-
debounceLeadingExecute the request before the delay startsboolean|Ref<boolean>false
debounceTrailingExecute the request after the delay endsboolean|Ref<boolean>true
debounceMaxWaitThe maximum time request is allowed to be delayed before it’s executednumber|Ref<number>-

Remark

  • options.debounceLeading support dynamic changes.
  • options.debounceTrailing support dynamic changes.
  • options.debounceMaxWait support dynamic changes.
  • runAsync will return a Promise when it is actually executed. When it is not executed, there will be no return.
  • cancel can abort a function waiting to be executed.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/devtools/index.html b/hooks/en/useRequest/devtools/index.html index 7bf0347a9..89f9184e7 100644 --- a/hooks/en/useRequest/devtools/index.html +++ b/hooks/en/useRequest/devtools/index.html @@ -26,7 +26,7 @@

Using in .vue

const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { debugKey: 'demo' })
 
const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { debugKey: 'demo' })
 

Use debugKey to create a unique identifier and enable it.

You're done! Open the browser Vue plugin to use it 🍺

Alt

- + diff --git a/hooks/en/useRequest/fetchs/index.html b/hooks/en/useRequest/fetchs/index.html index aee34ab97..5dc304acc 100644 --- a/hooks/en/useRequest/fetchs/index.html +++ b/hooks/en/useRequest/fetchs/index.html @@ -17,7 +17,7 @@
Skip to content
- + diff --git a/hooks/en/useRequest/formatResult/index.html b/hooks/en/useRequest/formatResult/index.html index c35bcca78..51bf5953f 100644 --- a/hooks/en/useRequest/formatResult/index.html +++ b/hooks/en/useRequest/formatResult/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

Format the request result

v1 use

Since v1 version useRequest needs to guarantee a good plug-in system, format is too invasive for the system, the formatting here is useFormatResult, format data to useFormatResult after the request data is completed, useFormatResult can well support typescript type prompt.

Jump to useFormatResult

v2 use

It now supports ts types very well.

Options

PropertyDescriptionTypeDefault
formatResultformat the request result(response: TData) => FormatData-
- + diff --git a/hooks/en/useRequest/global/index.html b/hooks/en/useRequest/global/index.html index 249bb5fd0..40e33e138 100644 --- a/hooks/en/useRequest/global/index.html +++ b/hooks/en/useRequest/global/index.html @@ -24,7 +24,7 @@ useRequestProvider({ ...options })

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/guide/index.html b/hooks/en/useRequest/guide/index.html index e4cc90672..a59456927 100644 --- a/hooks/en/useRequest/guide/index.html +++ b/hooks/en/useRequest/guide/index.html @@ -209,7 +209,7 @@ const { data } = useRequest(() => getUserInfo('666')) </script>

END

The above is a set of rigorous and reliable request scheme, which can also be used and changed according to their own needs.

Source

Docs

- + diff --git a/hooks/en/useRequest/index.html b/hooks/en/useRequest/index.html index 855494a30..e3b7f2f13 100644 --- a/hooks/en/useRequest/index.html +++ b/hooks/en/useRequest/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

Quick Start

🚀 useRequest

With a strong ability to manage network requests, Hook has a flying experience


useRequest Through the plug-in organization code, the core code is easy to understand, and can be easily expanded to more advanced functions. Capacity is now available to include

  • Automatic/manual request
  • Polling
  • Debounce
  • Throttle
  • Refresh on window focus
  • Error retry
  • Loading delay
  • SWR(stale-while-revalidate)
  • Caching
  • InfiniteScroll
  • Fetchs
  • Plugins

Default request

By default, the first parameter of useRequest is an asynchronous function, which is automatically executed when the component is initialized. At the same time, it automatically manages the status of loading, data, error of the asynchronous function.

const { data, error, loading } = useRequest(service)
 
const { data, error, loading } = useRequest(service)
 

Source

DocsDemo

- + diff --git a/hooks/en/useRequest/loadingDelay/index.html b/hooks/en/useRequest/loadingDelay/index.html index f1fc56638..10ee791dd 100644 --- a/hooks/en/useRequest/loadingDelay/index.html +++ b/hooks/en/useRequest/loadingDelay/index.html @@ -10,15 +10,15 @@ - + -
Skip to content
On this page

Loading Delay

By setting options.loadingDelay, you can delay the time when loading turns to true, effectively prevent UI flashing.

Code demonstration

Basic usage

API

PropertyDescriptionTypeDefault
loadingDelaySet the delay time for loading to become truenumber | Ref<number>0

Remark

options.loadingDelay supports dynamic changes.

Source

SourceDocsDemo

- +
Skip to content
On this page

Loading Delay

By setting options.loadingDelay, you can delay the time when loading turns to true, effectively prevent UI flashing.

Code demonstration

Basic usage

If you hit run quickly, the data without loadingDelay will flash.

API

PropertyDescriptionTypeDefault
loadingDelaySet the delay time for loading to become truenumber | Ref<number>0

Remark

options.loadingDelay supports dynamic changes.

Source

SourceDocsDemo

+ diff --git a/hooks/en/useRequest/middleware/index.html b/hooks/en/useRequest/middleware/index.html index 1a2accadf..bfe2d9868 100644 --- a/hooks/en/useRequest/middleware/index.html +++ b/hooks/en/useRequest/middleware/index.html @@ -42,7 +42,7 @@ use: [middleware], })

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/plugin/index.html b/hooks/en/useRequest/plugin/index.html index 5ec6dab70..560d295f0 100644 --- a/hooks/en/useRequest/plugin/index.html +++ b/hooks/en/useRequest/plugin/index.html @@ -194,7 +194,7 @@ [useFormatterPlugin, ...otherPlugins], )

Options

PropertyDescriptionTypeDefault
PluginCustom plugin(fetchInstance, option) => UseRequestPluginReturn-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/plugins/broadcastChannel/index.html b/hooks/en/useRequest/plugins/broadcastChannel/index.html index 5e2de6a26..8ed25e9fb 100644 --- a/hooks/en/useRequest/plugins/broadcastChannel/index.html +++ b/hooks/en/useRequest/plugins/broadcastChannel/index.html @@ -61,7 +61,7 @@ [useBroadcastChannelPlugin], )

Options

PropertyDescriptionType
broadcastChannelRequired, the name of the channel, which must be the same as the channel name to receive the same frequency data.string
broadcastChannelKeyNon mandatory identifier used to distinguish different application types.string
broadcastChannelOptionsThe configuration item for broadcast-channel has a default configuration of {webWorkerSupport: false}BroadcastChannelOptions
customPostMessageUser defined collection and sending of data. The default sending method is type, data, param, error(potMessage: (msg?: any)=>Promise<void>, channel?: BroadcastChannel) => void
onBroadcastChannelMonitor and collect the same frequency data sent by other applications (including multiple windows of the same application)(value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/plugins/fetchsing/index.html b/hooks/en/useRequest/plugins/fetchsing/index.html index ba67bf9c4..1ff9ca614 100644 --- a/hooks/en/useRequest/plugins/fetchsing/index.html +++ b/hooks/en/useRequest/plugins/fetchsing/index.html @@ -57,7 +57,7 @@ [useFetchingPlugin], )

Options

PropertyDescriptionType
fetchingKeyThe identification key of the status needs to be collected, and if it exists, it will be collected by the status
(params: any[]) => string
onFetchingIntermediate state function callback, the first parameter current is the current state of itself, and the second parameter record is all states(current:any,record:Record<string,any>) => void
isFetchingOfficial built-in function to determine whether all request statuses have been completed(_isFetching: boolean) => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/polling/index.html b/hooks/en/useRequest/polling/index.html index 6c3cfea29..ede5ebb91 100644 --- a/hooks/en/useRequest/polling/index.html +++ b/hooks/en/useRequest/polling/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

Polling

By setting options.pollingInterval, enter the polling mode, useRequest will periodically trigger service execution.

Code demonstration

Return

PropertyDescriptionType
runStart polling(...params: TParams) => void
runAsyncStart polling(...params: TParams) => Promise<TData>
cancelStop polling() => void

Options

PropertyDescriptionTypeDefault
pollingIntervalPolling interval, in milliseconds. If the value is greater than 0, the polling mode is activated.number|Ref<number>0
pollingWhenHiddenWhether to continue polling when the page is hidden. If set to false, polling will be temporarily paused when the page is hidden, and resume when the page is visible again.booleantrue
pollingErrorRetryCountNumber of polling error retries. If set to -1, an infinite number of timesnumber-1

Remark

  • options.pollingInterval support dynamic changes.
  • options.pollingWhenHidden support dynamic changes.
  • If you set options.manual = true, the initialization will not start polling, you need start it by run/runAsync.
  • The polling logic is to wait for pollingInterval time after each request is completed, and then initiate the next request.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/ready/index.html b/hooks/en/useRequest/ready/index.html index 8dcb3cc9a..628c9ef28 100644 --- a/hooks/en/useRequest/ready/index.html +++ b/hooks/en/useRequest/ready/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

Ready

useRequest provides an options.ready, when its value is false, the request will never be sent.

  • 1、In the automatic mode of manual=false, every time ready changes from false to true, a request will be automatically executed with the parameter options.defaultParams.
  • 2、When manual=true manual request mode, as long as ready=false, the request triggered by run/runAsync will not be executed.

Code demonstration

Options

PropertyDescriptionTypeDefault
readyIs the current request readyboolean|Ref<boolean>true

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/refreshDeps/index.html b/hooks/en/useRequest/refreshDeps/index.html index 2793062f4..5f26942ef 100644 --- a/hooks/en/useRequest/refreshDeps/index.html +++ b/hooks/en/useRequest/refreshDeps/index.html @@ -18,7 +18,7 @@
Skip to content

RefreshDeps

useRequest provides an options.refreshDeps,Instead of watch, it will listen for changes in responsive values and reissue requests when the values change .

remark

When the automatic, mode manual is not true and refreshDeps will take effect.

Manual collection of dependencies

When refreshDeps passes in an array of responsive objects, when its value changes, the request will be retriggered.

Automatically collect dependencies v1.6.0

When refreshDeps is passed in true, useRequest will automatically collect the response object parameters in the function parameters, as long as the response object in the parameters changes, it will carry the latest value to re-initiate the request.

API

Options

PropertyDescriptionTypeDefault
refreshDeps
  • Dependent on responsive objects, and the watch incoming listener object usage for vue
  • If set to true, the dependency execution is automatically collected and is also supported with ready
boolean | WatchSource[]-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/refreshOnWindowFocus/index.html b/hooks/en/useRequest/refreshOnWindowFocus/index.html index 355dcab25..d5707f9cf 100644 --- a/hooks/en/useRequest/refreshOnWindowFocus/index.html +++ b/hooks/en/useRequest/refreshOnWindowFocus/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

RefreshOnWindowFocus

By setting options.refreshOnWindowFocus, the request will be refreshed when the browser is refocus and revisible.

Code demonstration

API

Options

PropertyDescriptionTypeDefault
refreshOnWindowFocusWhether to re-initiate the request when the screen refocus or revisible.boolean|Ref<boolean>false
focusTimespanRe-request interval, in millisecondsnumber| Ref<number>5000

Remark

  • options.refreshOnWindowFocus support dynamic changes.
  • options.focusTimespan support dynamic changes.
  • Listen for browser events visibilitychange and focus.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/retry/index.html b/hooks/en/useRequest/retry/index.html index 3dbf57cb5..72a670c4e 100644 --- a/hooks/en/useRequest/retry/index.html +++ b/hooks/en/useRequest/retry/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

Error Retry

By setting options.retryCount, set the number of error retries, useRequest will retry after it fails.

Code demonstration

API

Options

PropertyDescriptionTypeDefault
retryCountThe number of retries. If set to -1, it will try again indefinitely.number-
retryInterval
  • Retry interval in milliseconds.
  • If not set, the simple exponential backoff algorithm will be used by default, taking 1000 * 2 ** retryCount, that is, waiting for 2s for the first retry, and 4s for the second retry. By analogy, if it is greater than 30s, take 30s
number-

Remark

  • cancel can cancel the ongoing retry behavior.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useRequest/scroll/index.html b/hooks/en/useRequest/scroll/index.html index 96a730de9..2dc387e17 100644 --- a/hooks/en/useRequest/scroll/index.html +++ b/hooks/en/useRequest/scroll/index.html @@ -17,7 +17,7 @@
Skip to content
- + diff --git a/hooks/en/useRequest/throttle/index.html b/hooks/en/useRequest/throttle/index.html index c2c6060cc..2dbc45351 100644 --- a/hooks/en/useRequest/throttle/index.html +++ b/hooks/en/useRequest/throttle/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

Throttle

useRequest It provides a options.throttleWait parameter into throttling mode, and if the run or the runAsync is frequently triggered, the request is made by throttling policy.

Basic usage

Options

The usage and effects of all throttle property are the same as lodash.throttle

PropertyDescriptionTypeDefault Value
throttleWaitThrottle wait time, in milliseconds. After setting, enter the throttle modenumber-
throttleLeadingExecute the request before throttling startsboolean|Ref<boolean>true
throttleTrailingExecute the request after throttling endsboolean|Ref<boolean>true

Remark

  • options.throttleWait support dynamic changes.
  • options.throttleLeading support dynamic changes.
  • options.throttleTrailing support dynamic changes.
  • runAsync will return a Promise when it is actually executed. When it is not executed, there will be no return.
  • cancel can abort a function waiting to be executed.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useResizeObserver/index.html b/hooks/en/useResizeObserver/index.html index 9e1cf940c..25d7010f7 100644 --- a/hooks/en/useResizeObserver/index.html +++ b/hooks/en/useResizeObserver/index.html @@ -24,7 +24,7 @@ box: UseResizeObserverOptions, })

Params

参数说明类型默认值
targetDOM 节点或者 Ref 对象() => Element | Element | JSX.Element-
options额外的配置项UseResizeObserverOptions-

Options

参数说明类型默认值
box盒模型模式ResizeObserverBoxOptionscontent-box

Source

SourceDocsDemo

- + diff --git a/hooks/en/useScroll/index.html b/hooks/en/useScroll/index.html index 8d8649280..4c0a4f01a 100644 --- a/hooks/en/useScroll/index.html +++ b/hooks/en/useScroll/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useScroll

Get the scroll position of an element.

Code demonstration

Basic Usage

Detect Whole Page Scroll

Control listen on scroll status

API

const position = useScroll(target, shouldUpdate)
 
const position = useScroll(target, shouldUpdate)
 

Params

PropertyDescriptionTypeDefault
targetDOM element or ref objectElement | Document | (() => Element) | JSX.Elementdocument
shouldUpdateWhether update position({ top: number, left: number }) => boolean-

Result

PropertyDescriptionType
positionThe current scroll position of the element.Readonly<Ref<{ left: number, top: number } | undefined>>

Source

SourceDocsDemo

- + diff --git a/hooks/en/useSessionStorageState/index.html b/hooks/en/useSessionStorageState/index.html index eaf768968..c897b6ffe 100644 --- a/hooks/en/useSessionStorageState/index.html +++ b/hooks/en/useSessionStorageState/index.html @@ -17,7 +17,7 @@
Skip to content
On this page

useSessionStorageState

A Hook for store state into sessionStorage.

Usage is exactly the same as useLocalStorageState.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useSet/index.html b/hooks/en/useSet/index.html index 0218db111..3d30989b6 100644 --- a/hooks/en/useSet/index.html +++ b/hooks/en/useSet/index.html @@ -38,7 +38,7 @@ } ] = useSet(initialValue?: Iterable<K>);

Result

PropertyDescriptionType
setSet objectReadonly<Ref<Set>>
addAdd item(key: T) => void
removeRemove item(key: T) => void
clearClear Set() => void
hasSet has(key: T) => void
resetReset to default() => void

Params

PropertyDescriptionTypeDefault
initialValueOptional, set default valueIterable<K>-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useSetState/index.html b/hooks/en/useSetState/index.html index 8bd88062f..c0fbbcc36 100644 --- a/hooks/en/useSetState/index.html +++ b/hooks/en/useSetState/index.html @@ -30,7 +30,7 @@ (patch: Record<string, any>) => void ]

Source

SourceDocsDemo

- + diff --git a/hooks/en/useSize/index.html b/hooks/en/useSize/index.html index c21e6fb95..cc2b1d3c5 100644 --- a/hooks/en/useSize/index.html +++ b/hooks/en/useSize/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useSize

A hook that observes size change of an element.

Code demonstration

Default usage

Pass in the DOM element

API

const size = useSize(target)
 
const size = useSize(target)
 

Params

PropertyDescriptionTypeDefault
targetDOM element or ref objectElement | (() => Element) | JSX.Element-

Result

PropertyDescriptionType
sizeSize of the elementReadonly《Ref<{ width: number, height: number } | undefined>>

Source

SourceDocsDemo

- + diff --git a/hooks/en/useThrottle/index.html b/hooks/en/useThrottle/index.html index 40d6c0c86..5bc9196a3 100644 --- a/hooks/en/useThrottle/index.html +++ b/hooks/en/useThrottle/index.html @@ -26,7 +26,7 @@ options?: Options );

Params

PropertyDescriptionTypeDefault
valueThe value to throttle.Ref<any>-
optionsConfig for the throttle behaviors.Options-

Options

PropertyDescriptionTypeDefault
waitThe number of milliseconds to delay.number1000
leadingSpecify invoking on the leading edge of the timeout.booleantrue
trailingSpecify invoking on the trailing edge of the timeout.booleantrue

Source

SourceDocsDemo

- + diff --git a/hooks/en/useThrottleFn/index.html b/hooks/en/useThrottleFn/index.html index ec930f1f7..6bae90dd8 100644 --- a/hooks/en/useThrottleFn/index.html +++ b/hooks/en/useThrottleFn/index.html @@ -34,7 +34,7 @@ options?: Options );

Params

PropertyDescriptionTypeDefault
fnThe function to throttle.(...args: any[]) => any-
optionsConfig for the throttle behaviorsOptions-

Options

PropertyDescriptionTypeDefault
waitThe number of milliseconds to delay.number1000
leadingSpecify invoking on the leading edge of the timeout.booleantrue
trailingSpecify invoking on the trailing edge of the timeout.booleantrue

Result

PropertyDescriptionType
runInvoke and pass parameters to fn.(...args: any[]) => any
cancelCancel the invocation of currently throttled function.() => void
flushImmediately invoke currently throttled function() => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useTimeout/index.html b/hooks/en/useTimeout/index.html index 2648c9905..ee9fec6f7 100644 --- a/hooks/en/useTimeout/index.html +++ b/hooks/en/useTimeout/index.html @@ -32,7 +32,7 @@ } ): fn: () => void;

Params

PropertyDescriptionType
fnThe function to be executed after delay milliseconds.() => void
delayThe number of milliseconds to wait before executing the function. The timer will be cancelled if delay is Ref<number | undefined >|number | undefined
immediateWhether the function should be executed immediately on first executionboolean

Result

PropertyDescriptionType
clearTimeoutclear timeout() => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useTitle/index.html b/hooks/en/useTitle/index.html index c2b38b369..f85bfc4ea 100644 --- a/hooks/en/useTitle/index.html +++ b/hooks/en/useTitle/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useTitle

A hook that set title of the page.

代码演示

API

useTitle(title: string, options?: Options);
 
useTitle(title: string, options?: Options);
 

Params

PropertyDescriptionTypeDefault
titlePage titleRef<string>-

Options

PropertyDescriptionTypeDefault
restoreOnUnmountWhether to restore the previous page title when the component is unmountedbooleanfalse

Source

SourceDocsDemo

- + diff --git a/hooks/en/useToggle/index.html b/hooks/en/useToggle/index.html index ed6a278d0..bc2558951 100644 --- a/hooks/en/useToggle/index.html +++ b/hooks/en/useToggle/index.html @@ -24,7 +24,7 @@ const [state, { toggle, set, setLeft, setRight }] = useToggle<T>(defaultValue: T); const [state, { toggle, set, setLeft, setRight }] = useToggle<T, U>(defaultValue: T, reverseValue: U);

Params

PropertyDescriptionTypeDefault
defaultValueThe default value. OptionalTfalse
reverseValueThe reverse value. OptionalU-

Result

PropertyDescriptionType
stateCurrent stateReadonly<Ref<any>>
actionsA set of methods to update state valueActions

Actions

PropertyDescriptionType
toggleToggle state() => void
setSet state(state: T | U) => void
setLeftSet state to defaultValue() => void
setRightSet state to reverseValue if reverseValue is available. Otherwise set it to the reverse of defaultValue() => void

Source

SourceDocsDemo

- + diff --git a/hooks/en/useTrackedEffect/index.html b/hooks/en/useTrackedEffect/index.html index 2f152cf45..3f0def20d 100644 --- a/hooks/en/useTrackedEffect/index.html +++ b/hooks/en/useTrackedEffect/index.html @@ -26,7 +26,7 @@ deps?: deps, )

Source

SourceDocsDemo

- + diff --git a/hooks/en/useUpdate/index.html b/hooks/en/useUpdate/index.html index 728fcc387..0aa7fdb8b 100644 --- a/hooks/en/useUpdate/index.html +++ b/hooks/en/useUpdate/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useUpdate

Used to simulate and rerender the page

Code demonstration

Default Usage

Advanced usage

API

const update = useUpdate()
 
const update = useUpdate()
 

Remark

By changing the variable, listening to this variable to achieve the simulated effect

Source

SourceDocsDemo

- + diff --git a/hooks/en/useUrlState/index.html b/hooks/en/useUrlState/index.html index f4c0cd027..f767e3aa0 100644 --- a/hooks/en/useUrlState/index.html +++ b/hooks/en/useUrlState/index.html @@ -34,7 +34,7 @@ localStorageKey?: string }

Params

PropertyDescriptionTypeDefault
initialStatedefaultS | () => S-
optionsWhen setting localStorageKey, if url has no parameter, the value of localStorage is used
UseUrlStateOptions-routerPushFn

Result

PropertyDescriptionType
stateUrl query object-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useVirtualList/index.html b/hooks/en/useVirtualList/index.html index e3c39b157..6b4472995 100644 --- a/hooks/en/useVirtualList/index.html +++ b/hooks/en/useVirtualList/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useVirtualList

A hook that allows you to use virtual list to render huge chunks of list data.

Code demonstration

Default usage

Dynamic item height

API

import { useVirtualList } from 'vue-hooks-plus'
 
import { useVirtualList } from 'vue-hooks-plus'
 

Params

PropertyDescriptionTypeDefault
listThe original list that contains a lot of data entriesRef<T[]>[]
optionsconfigOptions-

Options

PropertyDescriptionTypeDefault
wrapperTargetnner Container,DOM element or refRef<TargetValue<HTMLElement>>-
itemHeightItem height, accept a pixel value or a function that returns the height`number((index: number, data: T) => number)`
overscanThe extra buffer items outside of the view areanumber5

Result

参数说明类型默认值
listThe current portion of data need to be rendered to DOMRef<{ data: T, index: number }[]>-
refOutter Container,support DOM element or refRef<TargetValue<HTMLElement>>-
onScrollScroll to specific index(e: any) => void-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useWebSocket/index.html b/hooks/en/useWebSocket/index.html index f4cfa2b46..f99630c22 100644 --- a/hooks/en/useWebSocket/index.html +++ b/hooks/en/useWebSocket/index.html @@ -72,7 +72,7 @@ useWebSocket(socketUrl: string, options?: Options): Result;

Params

PropertyDescriptionTypeDefault
socketUrlRequired, webSocket urlstring-
optionsconnect the configuration itemOptions-

Options

PropertyDescriptionTypeDefault
onOpenThe webSocket connect callback(event: WebSocketEventMap['open'], instance: WebSocket) => void-
onCloseWebSocket close callback(event: WebSocketEventMap['close'], instance: WebSocket) => void-
onMessageWebSocket receive message callback(message: WebSocketEventMap['message'], instance: WebSocket) => void-
onErrorWebSocket error callback(event: WebSocketEventMap['error'], instance: WebSocket) => void-
reconnectLimitRetry timesnumber3
reconnectIntervalRetry interval(ms)number3000
manualManually starts connectionbooleanfalse
protocolsSub protocolsstring | string[]-

Result

PropertyDescriptionType
latestMessageLatest messageRef<WebSocketEventMap['message']>
sendMessageSend message functionWebSocket['send']
disconnectDisconnect webSocket manually() => void
connectConnect webSocket manually. If already connected, close the current one and reconnect.() => void
readyStateCurrent webSocket connection statusRef<ReadyState>
webSocketInsWebSocket instanceWebSocket

Source

SourceDocsDemo

- + diff --git a/hooks/en/useWhyDidYouUpdate/index.html b/hooks/en/useWhyDidYouUpdate/index.html index 8ce137c08..d1a089f3b 100644 --- a/hooks/en/useWhyDidYouUpdate/index.html +++ b/hooks/en/useWhyDidYouUpdate/index.html @@ -22,7 +22,7 @@
type IProps = Record<string, any>;
 useWhyDidYouUpdate(componentName: string, props: IProps): void;
 

Params

PropertyDescriptionTypeDefault
componentNameRequired, the name of the observation componentstring-
propsRequired, data to be observed (state or props and other data that may lead to rerender)Proxy<object>-

Result

Please open the browser console, you can see the output of the changed observed state or props.

Source

SourceDocsDemo

- + diff --git a/hooks/en/useWinResize/index.html b/hooks/en/useWinResize/index.html index 1968afa56..3b1cb8705 100644 --- a/hooks/en/useWinResize/index.html +++ b/hooks/en/useWinResize/index.html @@ -24,7 +24,7 @@ handler: (ev: Event) => void, );

Params

PropertyDescriptionTypeDefault
handler处理函数(ev: Event) => void-

Source

SourceDocsDemo

- + diff --git a/hooks/en/useWorker/index.html b/hooks/en/useWorker/index.html index ca3c38cc2..85aa0902d 100644 --- a/hooks/en/useWorker/index.html +++ b/hooks/en/useWorker/index.html @@ -30,7 +30,7 @@ import { VueHooksPlusUseWorkerResolver } from '@vue-hooks-plus/resolvers'

How to use

Code demonstration

Source

SourceDocsDemo

- + diff --git a/hooks/guide/index.html b/hooks/guide/index.html index 698262065..e8d6d88a8 100644 --- a/hooks/guide/index.html +++ b/hooks/guide/index.html @@ -74,7 +74,7 @@ ], }

其他支持的工具, 更多请看 unplugin-auto-import


🧩 兼容

不兼容 vue2 版本

- + diff --git a/hooks/hashmap.json b/hooks/hashmap.json index e6e07f8a0..66bd97610 100644 --- a/hooks/hashmap.json +++ b/hooks/hashmap.json @@ -1 +1 @@ -{"en_guide_index.md":"57ca2606","en_index.md":"003afb7e","en_migrate_index.md":"a098fa9d","en_onlineteaching_index.md":"a1feac68","en_useasyncorder_index.md":"d7c31f76","en_useboolean_index.md":"5916c673","en_usecookiestate_index.md":"8b7edec4","en_usecounter_index.md":"d9355273","en_usedarkmode_index.md":"aad58f1e","en_usedebounce_index.md":"5446bdc4","en_usedebouncefn_index.md":"89b9730e","en_usedrop_index.md":"c48981fc","en_useelementbounding_index.md":"3967ef18","en_useeventemitter_index.md":"9138df1d","en_useeventlistener_index.md":"16ccc73c","en_useexternal_index.md":"a9ebd938","en_usefavicon_index.md":"f7941c7d","en_usefetchs_index.md":"547a3b10","en_usefocuswithin_index.md":"e121f49c","en_useformatresult_index.md":"538fa433","en_usefull_index.md":"b9942045","en_usehover_index.md":"0b61ec18","en_useimmer_index.md":"ecd1f769","en_useinviewport_index.md":"198efd05","en_useinfinitescroll_index.md":"1bbc4ccb","en_useinterval_index.md":"a3544f48","en_usekeypress_index.md":"72b06f68","en_uselocalstoragestate_index.md":"56dd68b1","en_uselockfn_index.md":"abf7c622","en_uselongpress_index.md":"e3ee1a6c","en_usemap_index.md":"ab4cb47c","en_usemedia_index.md":"b309c22e","en_usemouse_index.md":"d67060cd","en_usemutationobserver_index.md":"6976506c","en_usenetwork_index.md":"150bf7ce","en_usepreview_index.md":"d35ccd06","en_useprevious_index.md":"3a90488a","en_userequest_basic_index.md":"5d3aa60e","en_userequest_cache_index.md":"ae8b96c7","en_userequest_debounce_index.md":"5bf0c4c4","en_userequest_devtools_index.md":"5de05e1b","en_userequest_fetchs_index.md":"8d02b630","en_userequest_formatresult_index.md":"6722f506","en_userequest_global_index.md":"05e2dd75","en_userequest_guide_index.md":"ff5a88d8","en_userequest_index.md":"90ca499a","en_userequest_loadingdelay_index.md":"765ab71b","en_userequest_middleware_index.md":"934641d5","en_userequest_plugin_index.md":"ed0bf5ec","en_userequest_plugins_broadcastchannel_index.md":"332f753d","en_userequest_plugins_fetchsing_index.md":"3830eefd","en_userequest_polling_index.md":"b9b99b9c","en_userequest_ready_index.md":"ce32fd9a","en_userequest_refreshdeps_index.md":"34927cce","en_userequest_refreshonwindowfocus_index.md":"93bec152","en_userequest_retry_index.md":"f742a7ab","en_userequest_scroll_index.md":"9d95f73a","en_userequest_throttle_index.md":"5af9c147","en_useresizeobserver_index.md":"eeb7c905","en_usescroll_index.md":"2c4e0317","en_usesessionstoragestate_index.md":"c898dd3e","en_useset_index.md":"1137d3fb","en_usesetstate_index.md":"468446dd","en_usesize_index.md":"d9edc248","en_usethrottle_index.md":"d067b5bb","en_usethrottlefn_index.md":"b4ef0c06","en_usetimeout_index.md":"68fd0a3c","en_usetitle_index.md":"e4911e84","en_usetoggle_index.md":"474508ae","en_usetrackedeffect_index.md":"ca46ffd0","en_useupdate_index.md":"9d2072bc","en_useurlstate_index.md":"90b675eb","en_usevirtuallist_index.md":"d674404c","en_usewebsocket_index.md":"2b9bce5d","en_usewhydidyouupdate_index.md":"300b98e6","en_usewinresize_index.md":"3189e17f","en_useworker_index.md":"4e8abe3e","guide_index.md":"be526aa2","index.md":"6fc21f51","migrate_index.md":"99295595","onlineteaching_index.md":"6559f4ec","useasyncorder_index.md":"2c8819d7","useboolean_index.md":"9a9d8d11","usecookiestate_index.md":"7ba34f7e","usecounter_index.md":"eede4841","usedarkmode_index.md":"8b9c0592","usedebounce_index.md":"56533116","usedebouncefn_index.md":"295e961f","usedrop_index.md":"c91a42f1","useelementbounding_index.md":"617a7f04","useeventemitter_index.md":"5517969f","useeventlistener_index.md":"32ad439a","useexternal_index.md":"6f25a3ae","usefavicon_index.md":"cd16e1d8","usefetchs_index.md":"3aa52105","usefocuswithin_index.md":"dc9958a4","useformatresult_index.md":"a4943a5c","usefull_index.md":"26de401f","usehover_index.md":"4fc742d3","useimmer_index.md":"a88c52ef","useinviewport_index.md":"7ea370b3","useinfinitescroll_index.md":"ee99ed1c","useinterval_index.md":"8c8506a8","usekeypress_index.md":"817f40c8","uselocalstoragestate_index.md":"b9437e5d","uselockfn_index.md":"db78a873","uselongpress_index.md":"742635c8","usemap_index.md":"f027e099","usemedia_index.md":"791e9df1","usemouse_index.md":"34b7f22c","usemutationobserver_index.md":"3d4ff997","usenetwork_index.md":"1bea3581","usepreview_index.md":"b83ae3ba","useprevious_index.md":"37b47723","userequest_basic_index.md":"3647c40b","userequest_cache_index.md":"7c72e278","userequest_debounce_index.md":"02319b34","userequest_devtools_index.md":"e2dc22e6","userequest_fetchs_index.md":"7b787ede","userequest_formatresult_index.md":"ea0a6d1b","userequest_global_index.md":"73543a63","userequest_guide_index.md":"22740817","userequest_index.md":"9846bc78","userequest_loadingdelay_index.md":"7b569100","userequest_middleware_index.md":"16e4b9db","userequest_plugin_index.md":"614fb77c","userequest_plugins_broadcastchannel_index.md":"cf5b4601","userequest_plugins_fetchsing_index.md":"ecf12b85","userequest_polling_index.md":"46e779af","userequest_ready_index.md":"878fadd6","userequest_refreshdeps_index.md":"17d08e6a","userequest_refreshonwindowfocus_index.md":"286f2726","userequest_retry_index.md":"42459700","userequest_scroll_index.md":"72c683d0","userequest_throttle_index.md":"70c7ca35","useresizeobserver_index.md":"e5a7019d","usescroll_index.md":"4ba2b64d","usesessionstoragestate_index.md":"3dfd5803","useset_index.md":"5d27e105","usesetstate_index.md":"bc43c234","usesize_index.md":"643f0217","usethrottle_index.md":"268e8b6b","usethrottlefn_index.md":"15b23ae0","usetimeout_index.md":"c1d6d5c9","usetitle_index.md":"e46caf33","usetoggle_index.md":"4b0d0f6d","usetrackedeffect_index.md":"6164cf82","useupdate_index.md":"bc14a3c7","useurlstate_index.md":"28e3b942","usevirtuallist_index.md":"b2b6cd89","usewebsocket_index.md":"5a52dd44","usewhydidyouupdate_index.md":"6e76f824","usewinresize_index.md":"42fc90cb","useworker_index.md":"42c0c966"} +{"en_guide_index.md":"57ca2606","en_index.md":"003afb7e","en_migrate_index.md":"a098fa9d","en_onlineteaching_index.md":"a1feac68","en_useasyncorder_index.md":"d7c31f76","en_useboolean_index.md":"5916c673","en_usecookiestate_index.md":"8b7edec4","en_usecounter_index.md":"d9355273","en_usedarkmode_index.md":"aad58f1e","en_usedebounce_index.md":"5446bdc4","en_usedebouncefn_index.md":"89b9730e","en_usedrop_index.md":"c48981fc","en_useelementbounding_index.md":"3967ef18","en_useeventemitter_index.md":"9138df1d","en_useeventlistener_index.md":"16ccc73c","en_useexternal_index.md":"a9ebd938","en_usefavicon_index.md":"f7941c7d","en_usefetchs_index.md":"547a3b10","en_usefocuswithin_index.md":"e121f49c","en_useformatresult_index.md":"538fa433","en_usefull_index.md":"b9942045","en_usehover_index.md":"0b61ec18","en_useimmer_index.md":"ecd1f769","en_useinviewport_index.md":"198efd05","en_useinfinitescroll_index.md":"1bbc4ccb","en_useinterval_index.md":"a3544f48","en_usekeypress_index.md":"72b06f68","en_uselocalstoragestate_index.md":"56dd68b1","en_uselockfn_index.md":"abf7c622","en_uselongpress_index.md":"e3ee1a6c","en_usemap_index.md":"ab4cb47c","en_usemedia_index.md":"b309c22e","en_usemouse_index.md":"d67060cd","en_usemutationobserver_index.md":"6976506c","en_usenetwork_index.md":"150bf7ce","en_usepreview_index.md":"d35ccd06","en_useprevious_index.md":"3a90488a","en_userequest_basic_index.md":"5d3aa60e","en_userequest_cache_index.md":"ae8b96c7","en_userequest_debounce_index.md":"5bf0c4c4","en_userequest_devtools_index.md":"5de05e1b","en_userequest_fetchs_index.md":"8d02b630","en_userequest_formatresult_index.md":"6722f506","en_userequest_global_index.md":"05e2dd75","en_userequest_guide_index.md":"ff5a88d8","en_userequest_index.md":"90ca499a","en_userequest_loadingdelay_index.md":"907067ef","en_userequest_middleware_index.md":"934641d5","en_userequest_plugin_index.md":"ed0bf5ec","en_userequest_plugins_broadcastchannel_index.md":"332f753d","en_userequest_plugins_fetchsing_index.md":"3830eefd","en_userequest_polling_index.md":"b9b99b9c","en_userequest_ready_index.md":"ce32fd9a","en_userequest_refreshdeps_index.md":"34927cce","en_userequest_refreshonwindowfocus_index.md":"93bec152","en_userequest_retry_index.md":"f742a7ab","en_userequest_scroll_index.md":"9d95f73a","en_userequest_throttle_index.md":"5af9c147","en_useresizeobserver_index.md":"eeb7c905","en_usescroll_index.md":"2c4e0317","en_usesessionstoragestate_index.md":"c898dd3e","en_useset_index.md":"1137d3fb","en_usesetstate_index.md":"468446dd","en_usesize_index.md":"d9edc248","en_usethrottle_index.md":"d067b5bb","en_usethrottlefn_index.md":"b4ef0c06","en_usetimeout_index.md":"68fd0a3c","en_usetitle_index.md":"e4911e84","en_usetoggle_index.md":"474508ae","en_usetrackedeffect_index.md":"ca46ffd0","en_useupdate_index.md":"9d2072bc","en_useurlstate_index.md":"90b675eb","en_usevirtuallist_index.md":"d674404c","en_usewebsocket_index.md":"2b9bce5d","en_usewhydidyouupdate_index.md":"300b98e6","en_usewinresize_index.md":"3189e17f","en_useworker_index.md":"4e8abe3e","guide_index.md":"be526aa2","index.md":"6fc21f51","migrate_index.md":"99295595","onlineteaching_index.md":"6559f4ec","useasyncorder_index.md":"2c8819d7","useboolean_index.md":"9a9d8d11","usecookiestate_index.md":"7ba34f7e","usecounter_index.md":"eede4841","usedarkmode_index.md":"8b9c0592","usedebounce_index.md":"56533116","usedebouncefn_index.md":"295e961f","usedrop_index.md":"c91a42f1","useelementbounding_index.md":"617a7f04","useeventemitter_index.md":"5517969f","useeventlistener_index.md":"32ad439a","useexternal_index.md":"6f25a3ae","usefavicon_index.md":"cd16e1d8","usefetchs_index.md":"3aa52105","usefocuswithin_index.md":"dc9958a4","useformatresult_index.md":"a4943a5c","usefull_index.md":"26de401f","usehover_index.md":"4fc742d3","useimmer_index.md":"a88c52ef","useinviewport_index.md":"7ea370b3","useinfinitescroll_index.md":"ee99ed1c","useinterval_index.md":"8c8506a8","usekeypress_index.md":"817f40c8","uselocalstoragestate_index.md":"b9437e5d","uselockfn_index.md":"db78a873","uselongpress_index.md":"742635c8","usemap_index.md":"f027e099","usemedia_index.md":"791e9df1","usemouse_index.md":"34b7f22c","usemutationobserver_index.md":"3d4ff997","usenetwork_index.md":"1bea3581","usepreview_index.md":"b83ae3ba","useprevious_index.md":"37b47723","userequest_basic_index.md":"3647c40b","userequest_cache_index.md":"7c72e278","userequest_debounce_index.md":"02319b34","userequest_devtools_index.md":"e2dc22e6","userequest_fetchs_index.md":"7b787ede","userequest_formatresult_index.md":"ea0a6d1b","userequest_global_index.md":"73543a63","userequest_guide_index.md":"22740817","userequest_index.md":"9846bc78","userequest_loadingdelay_index.md":"a4e71d74","userequest_middleware_index.md":"16e4b9db","userequest_plugin_index.md":"614fb77c","userequest_plugins_broadcastchannel_index.md":"cf5b4601","userequest_plugins_fetchsing_index.md":"ecf12b85","userequest_polling_index.md":"46e779af","userequest_ready_index.md":"878fadd6","userequest_refreshdeps_index.md":"17d08e6a","userequest_refreshonwindowfocus_index.md":"286f2726","userequest_retry_index.md":"42459700","userequest_scroll_index.md":"72c683d0","userequest_throttle_index.md":"70c7ca35","useresizeobserver_index.md":"e5a7019d","usescroll_index.md":"4ba2b64d","usesessionstoragestate_index.md":"3dfd5803","useset_index.md":"5d27e105","usesetstate_index.md":"bc43c234","usesize_index.md":"643f0217","usethrottle_index.md":"268e8b6b","usethrottlefn_index.md":"15b23ae0","usetimeout_index.md":"c1d6d5c9","usetitle_index.md":"e46caf33","usetoggle_index.md":"4b0d0f6d","usetrackedeffect_index.md":"6164cf82","useupdate_index.md":"bc14a3c7","useurlstate_index.md":"28e3b942","usevirtuallist_index.md":"b2b6cd89","usewebsocket_index.md":"5a52dd44","usewhydidyouupdate_index.md":"6e76f824","usewinresize_index.md":"42fc90cb","useworker_index.md":"42c0c966"} diff --git a/hooks/index.html b/hooks/index.html index 51a1985d7..6740ed209 100644 --- a/hooks/index.html +++ b/hooks/index.html @@ -18,7 +18,7 @@
Skip to content
vue-hooks-plus

VueHooks
Plus

快速开始

🛸 Vue3 的 Hooks

基础和高级的 hook, 高性能逻辑的抽象封装,满足大量场景。

🏄🏼‍♂️ 简洁易用

简洁的语法和易用的特性,轻松上手,详细的文档。

🎯 TypeScript

使用 TypeScript 构建,提供完整的类型定义文件,安全严谨。

🎪 交互式demo演示

眼见为实,身临其境。

🔋 支持 SSR

服务器端渲染的友好支持。

🦾 useRequest

基于插件模式设计的请求函数。

🤺 演练场

在线编码,大有用武之地。

🧩 按需加载

拿你想要,包体积更小。

🔐 安全性

测试完善,安全可靠。

Demo.vue
- + diff --git a/hooks/migrate/index.html b/hooks/migrate/index.html index b65619824..e7de5d9a1 100644 --- a/hooks/migrate/index.html +++ b/hooks/migrate/index.html @@ -53,7 +53,7 @@ [useFormatterPlugin, ...otherPlugins], )

只需要在原来的 plugin option 的基础上,将其迁移到 pluginOptions 下即可。

- + diff --git a/hooks/onlineTeaching/index.html b/hooks/onlineTeaching/index.html index f81707aa5..b8f1cab46 100644 --- a/hooks/onlineTeaching/index.html +++ b/hooks/onlineTeaching/index.html @@ -17,7 +17,7 @@
Skip to content

test

- + diff --git a/hooks/useAsyncOrder/index.html b/hooks/useAsyncOrder/index.html index 19506cc39..f20061a45 100644 --- a/hooks/useAsyncOrder/index.html +++ b/hooks/useAsyncOrder/index.html @@ -42,7 +42,7 @@ onError?: (err: unknown) => void }})

Params

参数说明类型
task异步任务顺序队列((resolve?: Resolve,reject?: InterruptibleRejectType,index?: number) => void)[]
option配置项-

Option

参数说明类型
delay延迟执行number
onReady准备阶段回调void
onSuccess成功回调(result: unknown) => void
onError错误回调(err: unknown) => void

Source

源码文档示例

- + diff --git a/hooks/useBoolean/index.html b/hooks/useBoolean/index.html index 08cff44c6..a88861fe4 100644 --- a/hooks/useBoolean/index.html +++ b/hooks/useBoolean/index.html @@ -24,7 +24,7 @@ defaultValue?: boolean, );

Params

参数说明类型默认值
defaultValue可选项,传入默认的状态值booleanfalse

Result

参数说明类型
state状态值Readonly<Ref<boolean>>
actions操作集合Actions

Actions

参数说明类型
toggle切换 state() => void
set设置 state(value: boolean) => void
setTrue设置为 true() => void
setFalse设置为 false() => void

Source

源码文档示例

- + diff --git a/hooks/useCookieState/index.html b/hooks/useCookieState/index.html index db31a8c80..455603fb0 100644 --- a/hooks/useCookieState/index.html +++ b/hooks/useCookieState/index.html @@ -36,7 +36,7 @@ options?: Options, );

注意

如果想从 document.cookie 中删除这条数据,可以使用 setState()setState(undefined)

Params

参数说明类型默认值
cookieKeyCookie 的 key 值string-
options可选项,配置 Cookie 属性Options-

Result

参数说明类型
state本地 Cookie 值Readonly<Ref<string>> | undefined
setState设置 Cookie 值SetState

setState 可以更新 cookie options,会与 useCookieState 设置的 options 进行 merge 操作。

const targetOptions = { ...options, ...updateOptions }

Options

参数说明类型默认值
defaultValue可选,定义 Cookie 默认值,但不同步到本地 Cookiestring | undefined | (() => (string | undefined))undefined
expires可选,定义 Cookie 存储有效时间number | Date-
path可选,定义 Cookie 可用的路径string/
domain可选,定义 Cookie 可用的域,默认为 Cookie 创建的域名string-
secure可选,Cookie 传输是否需要 https 安全协议booleanfalse
sameSite可选,Cookie 不能与跨域请求一起发送strict | lax | none-

Options 与 js-cookie attributes 保持一致。

Source

源码文档示例

- + diff --git a/hooks/useCounter/index.html b/hooks/useCounter/index.html index 90b430e92..78ff62090 100644 --- a/hooks/useCounter/index.html +++ b/hooks/useCounter/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useCounter

管理计数器的 Hook 。

代码演示

API

const [current, { inc, dec, set, reset }] = useCounter(initialValue, { min, max })
 
const [current, { inc, dec, set, reset }] = useCounter(initialValue, { min, max })
 

Result

参数说明类型
current当前值Readonly<Ref<number>>
inc加,默认加 1(delta?: number) => void
dec减,默认减 1(delta?: number) => void
set设置 current(value: number | ((c: number) => number)) => void
reset重置为默认值() => void

Params

参数说明类型默认值
initialValue默认值number0
min最小值number-
max最大值number-

Source

源码文档示例

- + diff --git a/hooks/useDarkMode/index.html b/hooks/useDarkMode/index.html index b8742a374..9bfcf79cf 100644 --- a/hooks/useDarkMode/index.html +++ b/hooks/useDarkMode/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useDarkMode

使用暗黑模式的 Hook。

代码演示

API

const [darkMode, setDarkMode] = useDarkMode()
 
const [darkMode, setDarkMode] = useDarkMode()
 

Result

参数说明类型
darkMode是否是暗黑模式ComputedRef<boolean>
setDarkMode设置暗黑模式,undefined 为跟随系统boolean | undefined

Source

源码文档示例

- + diff --git a/hooks/useDebounce/index.html b/hooks/useDebounce/index.html index e6fd3ac1d..e40f652cf 100644 --- a/hooks/useDebounce/index.html +++ b/hooks/useDebounce/index.html @@ -26,7 +26,7 @@ options?: Options );

Params

参数说明类型默认值
value需要防抖的值Ref<any>-
options配置防抖的行为Options-

Options

参数说明类型默认值
wait超时时间,单位为毫秒number1000
leading是否在延迟开始前调用函数booleanfalse
trailing是否在延迟开始后调用函数booleantrue
maxWait最大等待时间,单位为毫秒number-

Source

源码文档示例

- + diff --git a/hooks/useDebounceFn/index.html b/hooks/useDebounceFn/index.html index cd711bf65..2feb152c5 100644 --- a/hooks/useDebounceFn/index.html +++ b/hooks/useDebounceFn/index.html @@ -34,7 +34,7 @@ options?: Options );

Params

参数说明类型默认值
fn需要防抖执行的函数(...args: any[]) => any-
options配置防抖的行为Options-

Options

参数说明类型默认值
wait等待时间,单位为毫秒number1000
leading是否在延迟开始前调用函数booleanfalse
trailing是否在延迟开始后调用函数booleantrue
maxWait最大等待时间,单位为毫秒number-

Result

参数说明类型
run触发执行 fn,函数参数将会传递给 fn(...args: any[]) => any
cancel取消当前防抖() => void
flush立即调用当前防抖函数() => void

Source

源码文档示例

- + diff --git a/hooks/useDrop/index.html b/hooks/useDrop/index.html index 5060855dd..295b4d725 100644 --- a/hooks/useDrop/index.html +++ b/hooks/useDrop/index.html @@ -36,7 +36,7 @@ options?: DropOptions );

Params

参数说明类型默认值
targetDOM 节点或者 Ref 对象() => Element | Element | MutableRefObject<Element>-
options额外的配置项DragOptions-

DropOptions

参数说明类型默认值
onText拖拽/粘贴文字的回调(text: string, e: DragEvent) => void-
onFiles拖拽/粘贴文件的回调(files: File[], e: DragEvent) => void-
onUrl拖拽/粘贴链接的回调(text: string, e: DragEvent) => void-
onDom拖拽/粘贴自定义 DOM 节点的回调(content: any, e: DragEvent) => void-
onDrop拖拽任意内容的回调(e: DragEvent) => void-
onPaste粘贴内容的回调(e: DragEvent) => void-
onDragEnter拖拽进入(e: DragEvent) => void-
onDragOver拖拽中(e: DragEvent) => void-
onDragLeave拖拽出去(e: DragEvent) => void-

Source

源码文档示例

- + diff --git a/hooks/useElementBounding/index.html b/hooks/useElementBounding/index.html index c119850e3..482670d45 100644 --- a/hooks/useElementBounding/index.html +++ b/hooks/useElementBounding/index.html @@ -30,7 +30,7 @@ immediate?: boolean })

Params

参数说明类型默认值
targetDOM 节点或者 Ref 对象() => Element | Element | JSX.Element-
options额外的配置项UseElementBoundingOptions-

Options

参数说明类型默认值
reset当组件为挂载时,将所有值初始化为 0booleantrue
windowResize监听窗口尺寸变化booleantrue
windowScroll监听窗口滚动变化booleantrue
immediate组件挂载时立即执行booleantrue

Source

源码文档示例

- + diff --git a/hooks/useEventEmitter/index.html b/hooks/useEventEmitter/index.html index 9dfb7a66a..8055b0380 100644 --- a/hooks/useEventEmitter/index.html +++ b/hooks/useEventEmitter/index.html @@ -22,7 +22,7 @@
const event = useEventEmitter<T>();
 
 

Params

参数说明类型默认值
global是否为全局booleanfalse

Result

参数说明类型
emit发送一个事件通知(eventName?:string,val: T) => void
useSubscription订阅事件(eventName?:string,callback: (val: T) => void) => void

Source

源码文档示例

- + diff --git a/hooks/useEventListener/index.html b/hooks/useEventListener/index.html index 89c7207ae..1a482d010 100644 --- a/hooks/useEventListener/index.html +++ b/hooks/useEventListener/index.html @@ -28,7 +28,7 @@ options?: Options, );

Params

参数说明类型默认值
eventName事件名称string-
handler处理函数(ev: Event) => void-
options设置(可选)Options-

Options

参数说明类型默认值
targetDOM 节点或者 ref(() => Element) | Element | React.MutableRefObject<Element> | Window | Documentwindow
capture可选项,listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。booleanfalse
once可选项,listener 在添加之后最多只调用一次。如果是 true,listener 会在其被调用之后自动移除。booleanfalse
passive可选项,设置为 true 时,表示 listener 永远不会调用 preventDefault() 。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。boolean

Source

源码文档示例

- + diff --git a/hooks/useExternal/index.html b/hooks/useExternal/index.html index 9a0093882..60d855b47 100644 --- a/hooks/useExternal/index.html +++ b/hooks/useExternal/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useExternal

动态注入 JS 或 CSS 资源,useExternal 可以保证资源全局唯一。

代码演示

基本用法

加载 CSS

API

const status = useExternal(path: string, options?: Options);
 
const status = useExternal(path: string, options?: Options);
 

Params

参数说明类型默认值
path外部资源 url 地址string-

Result

参数说明类型
status加载状态,unset(未设置), loading(加载中), ready(加载完成), error(加载失败)Readonly<Ref<UseExternalStatus>>

Options

参数说明类型默认值
type需引入外部资源的类型,支持 js/css,如果不传,则根据 path 推导string-
jsscript 标签支持的属性HTMLScriptElement-
csslink 标签支持的属性HTMLStyleElement-

Source

源码文档示例

- + diff --git a/hooks/useFavicon/index.html b/hooks/useFavicon/index.html index f1901b2f6..d84cc5548 100644 --- a/hooks/useFavicon/index.html +++ b/hooks/useFavicon/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useFavicon

设置页面的 favicon。

代码演示

API

useFavicon(href: string);
 
useFavicon(href: string);
 

Params

参数说明类型默认值
hreffavicon 地址, 支持 svg/png/ico/gif 后缀的图片Ref<string>-

Source

源码文档示例

- + diff --git a/hooks/useFetchs/index.html b/hooks/useFetchs/index.html index 2285e9c43..c086d60e3 100644 --- a/hooks/useFetchs/index.html +++ b/hooks/useFetchs/index.html @@ -24,7 +24,7 @@ fetchKey: params => string | number, })

Result

参数说明类型默认值
fetchs收集的所有请求状态Readonly<FetchType<TData, TParams>>-
fetchRun需要运行的函数(...args) => void-

Params

参数说明类型默认值
service请求函数UseRequestService<TData, ParamsType<TParams>>-
options额外的配置项useRequest Options-
self自身配置 fetchKey(...args: ParamsType<TParams>) => string-

Options

参考 useRequest 的 option,注意,fetchRun 需要在手动模式下 manual 强制为 true

参数说明类型
fetchKey获取 key,用于注入 useRequest 的 cacheKey(...args) => string | number

Source

源码文档示例

- + diff --git a/hooks/useFocusWithin/index.html b/hooks/useFocusWithin/index.html index b91bcdd2b..06404b6ba 100644 --- a/hooks/useFocusWithin/index.html +++ b/hooks/useFocusWithin/index.html @@ -28,7 +28,7 @@ onChange, })

Params

参数说明类型默认值
targetDOM 节点或者 Ref 对象() => Element | Element | JSX.Element-
options额外的配置项Options-

Options

参数说明类型默认值
onFocus获取焦点时触发(e: FocusEvent) => void-
onBlur失去焦点时触发(e: FocusEvent) => void-
onChange焦点变化时触发(isFocusWithin: boolean) => void-

Result

参数说明类型
isFocusWithin焦点是否在当前区域Ref<boolean>

Source

源码文档示例

- + diff --git a/hooks/useFormatResult/index.html b/hooks/useFormatResult/index.html index 106e55f28..e0b7b2129 100644 --- a/hooks/useFormatResult/index.html +++ b/hooks/useFormatResult/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useFormatResult

格式化数据的 hook。

代码演示

API

const formatData = useFormatResult(data, callback)
 
const formatData = useFormatResult(data, callback)
 

Argument

参数说明类型默认值
data需要格式化的数据TData | Ref<TData>-
callback格式化函数(data: TData) => FData-

Result

参数说明类型
formatData格式化后的数据ComputedRef<FData> | FData

Source

源码文档示例

- + diff --git a/hooks/useFull/index.html b/hooks/useFull/index.html index d1e4198ab..bfeadb067 100644 --- a/hooks/useFull/index.html +++ b/hooks/useFull/index.html @@ -40,7 +40,7 @@ options?: Options );

Params

参数说明类型
targetDOM 节点或者 refElement
option设置Options

Options

参数说明类型默认值
onExit退出全屏触发() => void-
onEnter全屏触发() => void-
defaultElement默认全屏元素Element | HTMLElementhtml

Result

参数说明类型
isFullscren是否全屏Readonly<Ref<boolean>>
enterFullscreen设置全屏() => void
exitFullscreen退出全屏() => void
toggleFullscreen切换全屏() => void
isEnabled是否支持全屏boolean

Source

源码文档示例

- + diff --git a/hooks/useHover/index.html b/hooks/useHover/index.html index b33b21c16..e69d7f803 100644 --- a/hooks/useHover/index.html +++ b/hooks/useHover/index.html @@ -28,7 +28,7 @@ onChange, })

Params

参数说明类型默认值
targetDOM 节点或者 Ref 对象() => Element | Element | JSX.Element-
options额外的配置项Options-

Options

参数说明类型默认值
onEnterhover 时触发() => void-
onLeave取消 hover 时触发() => void-
onChangehover 状态变化时触发(isHovering: boolean) => void-

Result

参数说明类型
isHovering鼠标元素是否处于 hoverReadonly<Ref<boolean>>

Source

源码文档示例

- + diff --git a/hooks/useImmer/index.html b/hooks/useImmer/index.html index 14294510d..1e1f152d8 100644 --- a/hooks/useImmer/index.html +++ b/hooks/useImmer/index.html @@ -28,7 +28,7 @@

使用方法

hook 基于 immer 管理状态,会安装 immer保证在项目中正常工作

独立安装 @vue-hooks-plus/use-immer

基本用法

API

const [state, updater] = useImmer(initialValue)
 
const [state, updater] = useImmer(initialValue)
 

Params

参数说明类型默认值
state响应式对象Readonly<ShallowRef<S>>-
updater改变值Updater<S>-

Options

PropertyDescriptionTypeDefault
initialValuehover 时触发() => voidany

Source

源码文档示例

- + diff --git a/hooks/useInViewport/index.html b/hooks/useInViewport/index.html index d3df833d3..0e01fbca5 100644 --- a/hooks/useInViewport/index.html +++ b/hooks/useInViewport/index.html @@ -26,7 +26,7 @@ options?: Options );

Params

参数说明类型默认值
targetDOM 节点或者 refElement | () => Element | MutableRefObject<Element>-
options设置Options-

Options

更多信息参考 Intersection Observer API

参数说明类型默认值
threshold可以是单一的 number 也可以是 number 数组,target 元素和 root 元素相交程度达到该值的时候 ratio 会被更新number | number[]-
rootMargin根(root)元素的外边距string-
root指定根(root)元素,用于检查目标的可见性。必须是目标元素的父级元素,如果未指定或者为 null,则默认为浏览器视窗。Element | Document | () => (Element/Document) | MutableRefObject<Element>-

Result

参数说明类型
inViewport是否可见Readonly<Ref<boolean>> | undefined
ratio当前可见比例,在每次到达 options.threshold 设置节点时更新Readonly<Ref<number>> | undefined

Source

源码文档示例

- + diff --git a/hooks/useInfiniteScroll/index.html b/hooks/useInfiniteScroll/index.html index ae91edd8e..01402b007 100644 --- a/hooks/useInfiniteScroll/index.html +++ b/hooks/useInfiniteScroll/index.html @@ -76,7 +76,7 @@ } );

Result

参数说明类型
dataservice 返回的数据,其中的 list 属性为聚合后数据Readonly<Ref<TData>> | undefined
loading是否正在进行首次请求ComputedRef<boolean>
loadingMore是否正在进行更多数据请求Readonly<Ref<boolean>>
noMore是否没有更多数据了,配置 options.isNoMore 后生效ComputedRef<boolean>
loadMore加载更多数据,会自动捕获异常,通过 options.onError 处理() => void
loadMoreAsync加载更多数据,与 loadMore 行为一致,但返回的是 Promise,需要自行处理异常() => Promise<TData>
reload加载第一页数据,会自动捕获异常,通过 options.onError 处理() => void
reloadAsync加载第一页数据,与 reload 行为一致,但返回的是 Promise,需要自行处理异常() => Promise<TData>
mutate直接修改 data(data?: TData) => void
cancel忽略当前 Promise 的响应() => void

Options

参数说明类型默认值
target父级容器,如果存在,则在滚动到底部时,自动触发 loadMore。需要配合 isNoMore 使用,以便知道什么时候到最后一页了。() => Element | Element | MutableRefObject<Element>-
isNoMore是否有最后一页的判断逻辑,入参为当前聚合后的 data(data?: TData) => boolean-
threshold下拉自动加载,距离底部距离阈值number100
reloadDeps变化后,会自动触发 reloadWatchSource | any[] |any-
manual
  • 默认 false。 即在初始化时自动执行 service。
  • 如果设置为 true,则需要手动调用 reloadreloadAsync 触发执行。
booleanfalse
onBeforeservice 执行前触发() => void-
onSuccessservice resolve 时触发(data: TData) => void-
onErrorservice reject 时触发(e: Error) => void-
onFinallyservice 执行完成时触发(data?: TData, e?: Error) => void-

Source

源码文档示例

- + diff --git a/hooks/useInterval/index.html b/hooks/useInterval/index.html index f5ca57bbe..424e712c5 100644 --- a/hooks/useInterval/index.html +++ b/hooks/useInterval/index.html @@ -28,7 +28,7 @@ options?: Options ): fn: () => void;

Params

参数说明类型
fn要定时调用的函数() => void
delay间隔时间,当取值 undefined 时会停止计时器Ref<number>|number | undefined
options配置计时器的行为Options

Options

参数说明类型默认值
immediate是否在首次渲染时立即执行booleanfalse

Result

参数说明类型
clearInterval清除定时器() => void

Source

源码文档示例

- + diff --git a/hooks/useKeyPress/index.html b/hooks/useKeyPress/index.html index 0012c0bb0..1c01808a8 100644 --- a/hooks/useKeyPress/index.html +++ b/hooks/useKeyPress/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useKeyPress

监听键盘按键,支持组合键,支持按键别名的 Hook

基础用法

监听组合按键

精确匹配

API

const state = useKeyPress(target?: Target);
 
const state = useKeyPress(target?: Target);
 

Params

参数说明类型
keyFilter键盘输入的当前键Number | String | Number[]| String[] |(event: KeyboardEvent) => boolean
eventHandler事件处理(event: KeyboardEvent) => void
option额外的配置项Options

Options

参数说明类型默认值
events当所监听的事件类型触发时,接收到的一个事件通知对象EventListenerOrEventListenerObject-
targetDOM 节点或者 RefHTMLElement | Document | Window-
exactMatch是否准确匹配Boolean-

Source

源码文档示例

- + diff --git a/hooks/useLocalStorageState/index.html b/hooks/useLocalStorageState/index.html index 4aae0b0d8..63a4a6d15 100644 --- a/hooks/useLocalStorageState/index.html +++ b/hooks/useLocalStorageState/index.html @@ -36,7 +36,7 @@ options: Options<T> ): [T?, (value?: T | ((previousState: T) => T)) => void];

Options

参数说明类型默认值
defaultValue默认值any | (() => any)-
serializer自定义序列化方法(value: any) => stringJSON.stringify
deserializer自定义反序列化方法(value: string) => anyJSON.parse

Result

参数说明类型
state本地 Storage 值Ref<any | undefined>
setState设置 Storage 值SetState

注意

useLocalStorageState 在往 localStorage 写入数据前,会先调用一次 serializer,在读取数据之后,会先调用一次 deserializer

Source

源码文档示例

- + diff --git a/hooks/useLockFn/index.html b/hooks/useLockFn/index.html index b79158af1..570694b3a 100644 --- a/hooks/useLockFn/index.html +++ b/hooks/useLockFn/index.html @@ -24,7 +24,7 @@ fn: (...args: P) => Promise<V> ): fn: (...args: P) => Promise<V | undefined>;

Result

参数说明类型
fn增加了竞态锁的函数(...args: any[]) => Promise<any>

Params

参数说明类型默认值
fn需要增加竞态锁的函数(...args: any[]) => Promise<any>-

Source

源码文档示例

- + diff --git a/hooks/useLongPress/index.html b/hooks/useLongPress/index.html index 0c9342e9c..5bdfd3bd7 100644 --- a/hooks/useLongPress/index.html +++ b/hooks/useLongPress/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useLongPress

监听 Element 的长按事件。

代码演示

API

const { isPressing , pressingTime } = useLongPress(target: BasicTarget , options?: LongPressOptions)
 
const { isPressing , pressingTime } = useLongPress(target: BasicTarget , options?: LongPressOptions)
 

Result

参数说明类型
isPressing表示当前按压状态。如果正在按压,值为 true;否则,值为 false。Readonly<Ref<boolean>>
pressingTime表示按压的持续时间(可能以毫秒为单位)。此值仅在按压期间更新。Readonly<Ref<number>>

Params

参数说明类型Default
targetDOM元素 或 Ref引用() => Element | Element | MutableRefObject<Element>-
options配置選項UseLongPressOptions-

DropOptions

参数说明类型Default
delay触发 longpress 事件前的延迟时间(毫秒)number500
minUpdateTime更新 longpress 事件时间的最小间隔(毫秒)number100
cancelOnMove是否在发生移动时取消 longpress 事件booleantrue
modifierslongpress 事件修饰符LongPressModifiers-

LongPressModifiers

参数说明类型Default
stop停止传播事件boolean-
once只监听事件监听器一次boolean-
prevent阻止默认事件boolean-
capture事件监听器捕获选项boolean-
self检查事件目标元素是否与自身相同boolean-

Source

源码文档示例

- + diff --git a/hooks/useMap/index.html b/hooks/useMap/index.html index 55251ae7d..97a40c49e 100644 --- a/hooks/useMap/index.html +++ b/hooks/useMap/index.html @@ -38,7 +38,7 @@ } ] = useMap(initialValue?: Iterable<[any, any]>);

Result

参数说明类型
mapMap 对象Readonly<Ref<Map>>
set添加元素(key: any, value: any) => void
get获取元素(key: any) => MapItem
setAll生成一个新的 Map 对象(newMap: Iterable<[any, any]>) => void
remove移除元素(key: any) => void
reset重置为默认值() => void
clear清空 Map 对象() => void

Params

参数说明类型默认值
initialValue可选项,传入默认的 Map 参数Iterable<[any, any]>-

Source

源码文档示例

- + diff --git a/hooks/useMedia/index.html b/hooks/useMedia/index.html index 784b6ec0e..5ee42c10b 100644 --- a/hooks/useMedia/index.html +++ b/hooks/useMedia/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useMedia

优雅使用媒体查询的 Hook。

代码演示

API

const value = useMedia(['(min-width: 320px)'], [true], false)
 
const value = useMedia(['(min-width: 320px)'], [true], false)
 

Options

参数说明类型默认值
queries媒体查询对象数组string[]-
values每一项媒体查询对象的默认值boolean[]-
defaultValue默认值boolean

Result

参数说明类型
value是否符合查询Readonly<Ref<boolean>>

Source

源码文档示例

- + diff --git a/hooks/useMouse/index.html b/hooks/useMouse/index.html index 5af3440ab..b45390d11 100644 --- a/hooks/useMouse/index.html +++ b/hooks/useMouse/index.html @@ -46,7 +46,7 @@ elementPosY: number, } = useMouse(target?: Target);

Params

参数说明类型
targetDOM 节点或者 RefElement | () => Element | JSX.Element

Result

参数说明类型
screenX距离显示器左侧的距离number
screenY距离显示器顶部的距离number
clientX距离当前视窗左侧的距离number
clientY距离当前视窗顶部的距离number
pageX距离完整页面左侧的距离number
pageY距离完整页面顶部的距离number
elementX距离指定元素左侧的距离number
elementY距离指定元素顶部的距离number
elementH指定元素的高number
elementW指定元素的宽number
elementPosX指定元素距离完整页面左侧的距离number
elementPosY指定元素距离完整页面顶部的距离number

Source

源码文档示例

- + diff --git a/hooks/useMutationObserver/index.html b/hooks/useMutationObserver/index.html index 039986b57..907c91c79 100644 --- a/hooks/useMutationObserver/index.html +++ b/hooks/useMutationObserver/index.html @@ -28,7 +28,7 @@ options?: MutationObserverInit, );

Params

参数说明类型默认值
callback触发的回调函数(mutations: MutationRecord[], observer: MutationObserver) => void-
targetDOM 节点或者 RefElement | () => Element | MutableRefObject<Element>-
options设置项MutationObserverInit{}

Options

配置项请参考 MutationObserver

Source

源码文档示例

- + diff --git a/hooks/useNetwork/index.html b/hooks/useNetwork/index.html index e66cfafff..9a8706d45 100644 --- a/hooks/useNetwork/index.html +++ b/hooks/useNetwork/index.html @@ -40,7 +40,7 @@ } const result: NetworkState = useNetwork()

Result

参数描述类型
online网络是否为在线boolean
sinceonline 最后改变时间Date
rtt当前连接下评估的往返时延number
type设备使用与所述网络进行通信的连接的类型bluetooth | cellular | ethernet | none | wifi | wimax | other | unknown
downlink有效带宽估算(单位:兆比特/秒)number
downlinkMax最大下行速度(单位:兆比特/秒)number
saveData用户代理是否设置了减少数据使用的选项boolean
effectiveType网络连接的类型slow-2g | 2g | 3g | 4g

Source

源码文档示例

- + diff --git a/hooks/usePreview/index.html b/hooks/usePreview/index.html index 0c7149e06..f7df50dc9 100644 --- a/hooks/usePreview/index.html +++ b/hooks/usePreview/index.html @@ -85,7 +85,7 @@

API

const { container } = usePreview(target)
 
const { container } = usePreview(target)
 

Params

参数说明类型
targetDOM 节点或者 RefVueComponent | string | JSX.Element

Result

参数说明类型
containerDOM 节点或者 RefElement | () => Element | JSX.Element

Source

源码文档示例

- + diff --git a/hooks/usePrevious/index.html b/hooks/usePrevious/index.html index d96c909ff..e9f94754a 100644 --- a/hooks/usePrevious/index.html +++ b/hooks/usePrevious/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

usePrevious

保存上一次状态的 Hook。

基础用法

自定义 shouldUpdate 函数

Result

参数说明类型
previousRef上次 state 的值Readonly<Ref<T>>

Params

参数说明类型默认值
currentRef需要记录变化的值Ref<T> | ComputedRef<T>-
shouldUpdate可选,自定义判断值是否变化(prev: T | undefined, next: T) => boolean(a, b) => a !== b

Source

源码文档示例

- + diff --git a/hooks/useRequest/basic/index.html b/hooks/useRequest/basic/index.html index c9c7fc4be..46a11db80 100644 --- a/hooks/useRequest/basic/index.html +++ b/hooks/useRequest/basic/index.html @@ -86,7 +86,7 @@ } );

Result

参数说明类型
dataservice 返回的数据Readonly<Ref<TData>> | undefined
errorservice 抛出的异常Readonly<Ref<Error>> | undefined
loadingservice 是否正在执行Readonly<>Ref<boolean>
params当次执行的 service 的参数数组。比如你触发了 run(1, 2, 3),则 params 等于 [1, 2, 3]Readonly<Ref<TParams | []>>
run
  • 手动触发 service 执行,参数会传递给 service
  • 异常自动处理,通过 onError 反馈
(...params: TParams) => void
runAsyncrun 用法一致,但返回的是 Promise,需要自行处理异常。(...params: TParams) => Promise<TData>
refresh使用上一次的 params,重新调用 run() => void
refreshAsync使用上一次的 params,重新调用 runAsync() => Promise<TData>
mutate直接修改 data(data?: TData | ((oldData?: TData) => (TData | undefined))) => void
cancel取消当前正在进行的请求() => void

Options

参数说明类型默认值
initialData初始化的数据TData | undefined
manual
  • 默认 false。 即在初始化时自动执行 service。
  • 如果设置为 true,则需要手动调用 runrunAsync 触发执行。
booleanfalse
defaultParams首次默认执行时,传递给 service 的参数TParams-
formatResult格式化请求结果,v1 建议使用 useFormatResult(response: TData) => FormatData-
onBeforeservice 执行前触发(params: TParams) => void-
onSuccessservice resolve 时触发(data: TData, params: TParams) => void-
onErrorservice reject 时触发(e: Error, params: TParams) => void-
onFinallyservice 执行完成时触发(params: TParams, data?: TData, e?: Error) => void-

🛸 PRO

这是 useRequest 最基础的功能,接下来介绍一些更高级的能力。

Source

源码文档示例

- + diff --git a/hooks/useRequest/cache/index.html b/hooks/useRequest/cache/index.html index ebf7c1512..e1277e04f 100644 --- a/hooks/useRequest/cache/index.html +++ b/hooks/useRequest/cache/index.html @@ -32,7 +32,7 @@
import { clearCache } from 'vue-hooks-plus/es/useRequest';
 clearCache(cacheKey?: string | string[]);
 
  1. 支持清空单个缓存,或一组缓存
  2. 如果 cacheKey 为空,则清空所有缓存数据

注意

Source

源码文档示例

- + diff --git a/hooks/useRequest/debounce/index.html b/hooks/useRequest/debounce/index.html index ca5a37a4c..b6c0831fd 100644 --- a/hooks/useRequest/debounce/index.html +++ b/hooks/useRequest/debounce/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

防抖

useRequest 提供了一个 options.debounceWait 参数,进入防抖模式,此时如果频繁触发 run 或者 runAsync,则会以防抖策略进行请求。

代码演示

Options

debounce 所有参数用法和效果同 lodash.debounce

参数说明类型默认值
debounceWait防抖等待时间, 单位为毫秒,设置后,进入防抖模式number-
debounceLeading在延迟开始前执行调用boolean|Ref<boolean>false
debounceTrailing在延迟结束后执行调用boolean|Ref<boolean>true
debounceMaxWait允许被延迟的最大值number|Ref<number>-

注意

  • options.debounceLeading 支持动态变化。
  • options.debounceTrailing 支持动态变化。
  • options.debounceMaxWait 支持动态变化。
  • runAsync 在真正执行时,会返回 Promise。在未被执行时,不会有任何返回。
  • cancel 可以中止正在等待执行的函数。

Source

源码文档示例

- + diff --git a/hooks/useRequest/devtools/index.html b/hooks/useRequest/devtools/index.html index 3ce8f4ccb..ae156889e 100644 --- a/hooks/useRequest/devtools/index.html +++ b/hooks/useRequest/devtools/index.html @@ -26,7 +26,7 @@

.vue 中使用

使用 debugKey 创建唯一标识开启。

const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { debugKey: 'demo' })
 
const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), { debugKey: 'demo' })
 

大功告成!打开浏览器 Vue 插件进行使用吧 🍺

Alt

- + diff --git a/hooks/useRequest/fetchs/index.html b/hooks/useRequest/fetchs/index.html index 437d1528c..a115f56e0 100644 --- a/hooks/useRequest/fetchs/index.html +++ b/hooks/useRequest/fetchs/index.html @@ -17,7 +17,7 @@
Skip to content
- + diff --git a/hooks/useRequest/formatResult/index.html b/hooks/useRequest/formatResult/index.html index e5c5f443d..747e99742 100644 --- a/hooks/useRequest/formatResult/index.html +++ b/hooks/useRequest/formatResult/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

格式化请求数据

v1 use

由于 v1 版本 useRequest 需要保证良好的插件系统,format 对于系统来说侵入性太大,这里格式化使用的的是 useFormatResult,在请求数据完成后将 data 传入 useFormatResult 进行格式化, useFormatResult 可以很好的支持 typescript 类型提示。

跳转至 useFormatResult

v2 use

它现在能够很好的支持 ts 类型。

Options

参数说明类型默认值
formatResult格式化请求结果(response: TData) => FormatData-
- + diff --git a/hooks/useRequest/global/index.html b/hooks/useRequest/global/index.html index be00233a2..fc11d808f 100644 --- a/hooks/useRequest/global/index.html +++ b/hooks/useRequest/global/index.html @@ -24,7 +24,7 @@ useRequestProvider({ ...options })

Source

源码文档示例

- + diff --git a/hooks/useRequest/guide/index.html b/hooks/useRequest/guide/index.html index 9125ffa6e..0ce383a2d 100644 --- a/hooks/useRequest/guide/index.html +++ b/hooks/useRequest/guide/index.html @@ -209,7 +209,7 @@ const { data } = useRequest(() => getUserInfo('666')) </script>

结语

上述是一套严谨可靠的请求方案,也可根据自身需求自行使用更改。

Source

文档

- + diff --git a/hooks/useRequest/index.html b/hooks/useRequest/index.html index 71a330371..c5f42f868 100644 --- a/hooks/useRequest/index.html +++ b/hooks/useRequest/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

快速开始

🚀 useRequest

拥有强大管理网络请求能力,让开发具有飞一般的体验 的 Hook


useRequest 通过插件式组织代码,核心代码简单易懂,并且可以很方便的扩展出更高级的功能。目前已有能力包括:

  • 自动请求/手动请求
  • 轮询
  • 防抖
  • 节流
  • 屏幕聚焦重新请求
  • 错误重试
  • loading delay
  • SWR(stale-while-revalidate)
  • 缓存
  • 滚动加载和分页加载
  • 并行请求
  • 自定义插件

默认请求

默认情况下,useRequest 第一个参数是一个异步函数,在组件初始化时,会自动执行该异步函数。同时自动管理该异步函数的 loading , data , error 等状态。

const { data, error, loading } = useRequest(service)
 
const { data, error, loading } = useRequest(service)
 

Source

文档示例

- + diff --git a/hooks/useRequest/loadingDelay/index.html b/hooks/useRequest/loadingDelay/index.html index 5b0fbcbb6..4ccaf1f7d 100644 --- a/hooks/useRequest/loadingDelay/index.html +++ b/hooks/useRequest/loadingDelay/index.html @@ -10,15 +10,15 @@ - + -
Skip to content
On this page

Loading Delay

通过设置 options.loadingDelay ,可以延迟 loading 变成 true 的时间,有效防止闪烁。

代码演示

基本用法

API

参数说明类型默认值
loadingDelay设置 loading 变成 true 的延迟时间number | Ref<number>0

备注

options.loadingDelay 支持动态变化。

Source

源码文档示例

- +
Skip to content
On this page

Loading Delay

通过设置 options.loadingDelay ,可以延迟 loading 变成 true 的时间,有效防止闪烁。

代码演示

基本用法

如果你快速的点击 run, 没使用 loadingDelay 的数据将会闪烁。

API

参数说明类型默认值
loadingDelay设置 loading 变成 true 的延迟时间number | Ref<number>0

备注

options.loadingDelay 支持动态变化。

Source

源码文档示例

+ diff --git a/hooks/useRequest/middleware/index.html b/hooks/useRequest/middleware/index.html index 2ee441ab4..5d5280b87 100644 --- a/hooks/useRequest/middleware/index.html +++ b/hooks/useRequest/middleware/index.html @@ -42,7 +42,7 @@ use: [middleware], })

Source

源码文档示例

- + diff --git a/hooks/useRequest/plugin/index.html b/hooks/useRequest/plugin/index.html index d4ff30421..a4d90d00d 100644 --- a/hooks/useRequest/plugin/index.html +++ b/hooks/useRequest/plugin/index.html @@ -194,7 +194,7 @@ [useFormatterPlugin, ...otherPlugins], )

Options

参数说明类型默认值
Plugin自定义插件(fetchInstance, option) => UseRequestPluginReturn-

Source

源码文档示例

- + diff --git a/hooks/useRequest/plugins/broadcastChannel/index.html b/hooks/useRequest/plugins/broadcastChannel/index.html index b086046b1..28c601557 100644 --- a/hooks/useRequest/plugins/broadcastChannel/index.html +++ b/hooks/useRequest/plugins/broadcastChannel/index.html @@ -61,7 +61,7 @@ [useBroadcastChannelPlugin], )

Options

PropertyDescriptionType
broadcastChannel必填,频道的名称,需要频道名称一样才能接收到同频数据。string
broadcastChannelKey非必填,用于区分不同应用类型的标识符。string
broadcastChannelOptionsbroadcast-channel 的配置项,默认配置{ webWorkerSupport:false }BroadcastChannelOptions
customPostMessage用户自定义收集发送数据,默认发送方式为 type,data,params,error(postMessage: (msg?: any) => Promise<void>, channel?: BroadcastChannel) => void
onBroadcastChannel监听收集其他应用(包括同一应用的多窗口)发送的同频数据(value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void

Source

源码文档示例

- + diff --git a/hooks/useRequest/plugins/fetchsing/index.html b/hooks/useRequest/plugins/fetchsing/index.html index 9d9c1a7e7..88ad0a59e 100644 --- a/hooks/useRequest/plugins/fetchsing/index.html +++ b/hooks/useRequest/plugins/fetchsing/index.html @@ -57,7 +57,7 @@ [useFetchingPlugin], )

Options

PropertyDescriptionType
fetchingKey需要收集状态的标识 key,存在即会被状态收集(params: any[]) => string
onFetching中间态函数回调,第一个参数current是当前自身的状态,第二个参数record是所有的状态(current:any,record:Record<string,any>) => void
isFetching官方自带的功能,判断所有请求状态是否请求完成(_isFetching: boolean) => void

Source

源码文档示例

- + diff --git a/hooks/useRequest/polling/index.html b/hooks/useRequest/polling/index.html index a76ab5e37..9123ba1a6 100644 --- a/hooks/useRequest/polling/index.html +++ b/hooks/useRequest/polling/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

轮询

通过设置 options.pollingInterval,进入轮询模式,useRequest 会定时触发 service 执行。

代码演示

Return

参数说明类型
run启动轮询(...params: TParams) => void
runAsync启动轮询(...params: TParams) => Promise<TData>
cancel停止轮询() => void

Options

参数说明类型默认值
pollingInterval轮询间隔,单位为毫秒。如果值大于 0,则启动轮询模式。number|Ref<number>0
pollingWhenHidden在页面隐藏时,是否继续轮询。如果设置为 false,在页面隐藏时会暂时停止轮询,页面重新显示时继续上次轮询。booleantrue
pollingErrorRetryCount轮询错误重试次数。如果设置为 -1,则无限次number-1

注意

  • options.pollingInterval 支持动态变化。
  • options.pollingWhenHidden 支持动态变化。
  • 如果设置 options.manual = true,则初始化不会启动轮询,需要通过 run/runAsync 触发开始。
  • 轮询原理是在每次请求完成后,等待 pollingInterval 时间,发起下一次请求。

Source

源码文档示例

- + diff --git a/hooks/useRequest/ready/index.html b/hooks/useRequest/ready/index.html index 449034428..0b7ba6c57 100644 --- a/hooks/useRequest/ready/index.html +++ b/hooks/useRequest/ready/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

Ready

useRequest 提供了一个 options.ready 参数,当其值为 false 时,请求永远都不会发出。

  • 1、当 manual=false 自动请求模式时,每次 readyfalse 变为 true 时,都会自动发起请求,会带上参数 options.defaultParams
  • 2、当 manual=true 手动请求模式时,只要 ready=false,则通过 run/runAsync 触发的请求都不会执行。

代码演示

Options

参数说明类型默认值
ready当前请求是否准备好了boolean|Ref<boolean>true

Source

源码文档示例

- + diff --git a/hooks/useRequest/refreshDeps/index.html b/hooks/useRequest/refreshDeps/index.html index 33644ceb7..2ba1d336b 100644 --- a/hooks/useRequest/refreshDeps/index.html +++ b/hooks/useRequest/refreshDeps/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

依赖刷新

useRequest 提供了一个 options.refreshDeps 参数,替代了 watch,会监听响应式值的变化,当值变化的时候会重新发起请求。

注意

只有自动模式模式,即 manual 不为 true ,依赖刷新配置才会生效。

手动收集依赖

refreshDeps 传入的是响应式对象数组的时候,当它的值变化后,会重新触发请求 。

自动收集依赖 v1.6.0

refreshDeps 传入的是 true 的时候,useRequest 会自动收集函数参数中的响应式对象参数,只要参数里面的响应式对象发生变化就会携带最新的值重新发起请求 。

API

Options

参数说明类型默认值
refreshDeps
  • 依赖响应式对象数组,和 vuewatch 传入监听的对象用法一致。
  • 如果设置为 true,则会自动收集依赖执行,也支持和 ready 搭配使用
boolean | WatchSource[]-

Source

源码文档示例

- + diff --git a/hooks/useRequest/refreshOnWindowFocus/index.html b/hooks/useRequest/refreshOnWindowFocus/index.html index 2b7c7ad6f..0eca2891c 100644 --- a/hooks/useRequest/refreshOnWindowFocus/index.html +++ b/hooks/useRequest/refreshOnWindowFocus/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

屏幕聚焦重新请求

useRequest 提供了一个 options.refreshOnWindowFocus 参数,在浏览器窗口 refocusrevisible 时,会重新发起请求。

代码演示

API

Options

参数说明类型默认值
refreshOnWindowFocus在屏幕重新获取焦点或重新显示时,重新发起请求boolean|Ref<boolean>false
focusTimespan重新请求间隔,单位为毫秒number| Ref<number>5000

注意

  • options.refreshOnWindowFocus 支持动态变化。
  • options.focusTimespan 支持动态变化。
  • 监听的浏览器事件为 visibilitychangefocus

Source

源码文档示例

- + diff --git a/hooks/useRequest/retry/index.html b/hooks/useRequest/retry/index.html index 5ef54fce3..c3f884c99 100644 --- a/hooks/useRequest/retry/index.html +++ b/hooks/useRequest/retry/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

错误重试

useRequest 提供了一个 options.retryCount 参数,指定错误重试次数,则 useRequest 在失败后会进行重试

代码演示

API

Options

参数说明类型默认值
retryCount错误重试次数。如果设置为 -1,则无限次重试。number-
retryInterval
  • 重试时间间隔,单位为毫秒。
  • 如果不设置,默认采用简易的指数退避算法,取 1000 * 2 ** retryCount,也就是第一次重试等待 2s,第二次重试等待 4s,以此类推,如果大于 30s,则取 30s
number-

注意

  • cancel 可以取消正在进行的重试行为。

Source

源码文档示例

- + diff --git a/hooks/useRequest/scroll/index.html b/hooks/useRequest/scroll/index.html index 149c61ea6..3206a63f0 100644 --- a/hooks/useRequest/scroll/index.html +++ b/hooks/useRequest/scroll/index.html @@ -17,7 +17,7 @@
Skip to content
- + diff --git a/hooks/useRequest/throttle/index.html b/hooks/useRequest/throttle/index.html index 4c2a2be22..c5b7ac7c4 100644 --- a/hooks/useRequest/throttle/index.html +++ b/hooks/useRequest/throttle/index.html @@ -18,7 +18,7 @@
Skip to content
On this page

节流

useRequest 提供了一个 options.throttleWait 参数,进入节流模式,此时如果频繁触发 run 或者 runAsync,则会以节流策略进行请求。

代码演示

Options

throttle 所有参数用法和效果同 lodash.throttle

参数说明类型默认值
throttleWait节流等待时间, 单位为毫秒,设置后,进入节流模式number-
throttleLeading在节流开始前执行调用boolean|Ref<boolean>true
throttleTrailing在节流结束后执行调用boolean|Ref<boolean>true

注意

  • options.throttleWait 支持动态变化。
  • options.throttleLeading 支持动态变化。
  • options.throttleTrailing 支持动态变化。
  • runAsync 在真正执行时,会返回 Promise。在未被执行时,不会有任何返回。

Source

源码文档示例

- + diff --git a/hooks/useResizeObserver/index.html b/hooks/useResizeObserver/index.html index 63c36b5c7..ed3d70454 100644 --- a/hooks/useResizeObserver/index.html +++ b/hooks/useResizeObserver/index.html @@ -24,7 +24,7 @@ box: ResizeObserverBoxOptions, })

Params

参数说明类型默认值
targetDOM 节点或者 Ref 对象() => Element | Element | JSX.Element-
options额外的配置项UseResizeObserverOptions-

Options

参数说明类型默认值
box盒模型模式ResizeObserverBoxOptionscontent-box

Source

源码文档示例

- + diff --git a/hooks/useScroll/index.html b/hooks/useScroll/index.html index 6c727d70c..d050c6d82 100644 --- a/hooks/useScroll/index.html +++ b/hooks/useScroll/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useScroll

优雅监听元素的滚动位置的 Hook。

代码演示

基础用法

监测整页的滚动

控制滚动状态的监听

API

const position = useScroll(target, shouldUpdate)
 
const position = useScroll(target, shouldUpdate)
 

Params

参数说明类型默认值
targetDOM 节点或者 refElement | Document | (() => Element) | JSX.Elementdocument
shouldUpdate控制是否更新滚动信息({ top: number, left: number }) => boolean-

Result

参数说明类型
position滚动容器当前的滚动位置Readonly<Ref<{ left: number, top: number } | undefined>>

Source

源码文档示例

- + diff --git a/hooks/useSessionStorageState/index.html b/hooks/useSessionStorageState/index.html index 6f6b793f9..29f3ef6b4 100644 --- a/hooks/useSessionStorageState/index.html +++ b/hooks/useSessionStorageState/index.html @@ -17,7 +17,7 @@
Skip to content
On this page

useSessionStorageState

将状态存储在 sessionStorage 中的 Hook 。

用法与 useLocalStorageState 一致。

Source

源码文档示例

- + diff --git a/hooks/useSet/index.html b/hooks/useSet/index.html index 2f5b03812..6498480c0 100644 --- a/hooks/useSet/index.html +++ b/hooks/useSet/index.html @@ -38,7 +38,7 @@ } ] = useSet(initialValue?: Iterable<K>);

Result

参数说明类型
setSet 对象Readonly<Ref<Set>>
add添加元素(key: T) => void
remove移除元素(key: T) => void
reset重置为默认值() => void
clear清除 Set() => void
hasSet has(key: T) => void

Params

参数说明类型默认值
initialValue可选项,传入默认的 Set 参数Iterable<K>-

Source

源码文档示例

- + diff --git a/hooks/useSetState/index.html b/hooks/useSetState/index.html index 4386ea864..3c3dffe03 100644 --- a/hooks/useSetState/index.html +++ b/hooks/useSetState/index.html @@ -30,7 +30,7 @@ (patch: Record<string, any>) => void ]

Source

源码文档示例

- + diff --git a/hooks/useSize/index.html b/hooks/useSize/index.html index 679556122..0263811cc 100644 --- a/hooks/useSize/index.html +++ b/hooks/useSize/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useSize

监听 DOM 节点尺寸变化的 Hook

代码演示

基础用法

传入 Dom

API

const size = useSize(target)
 
const size = useSize(target)
 

Params

参数说明类型默认值
targetDOM 节点或者 refElement | (() => Element) | JSX.Element-

Result

参数说明类型
sizeDOM 节点的尺寸Readonly<Ref<{ width: number, height: number } | undefined>>

Source

源码文档示例

- + diff --git a/hooks/useThrottle/index.html b/hooks/useThrottle/index.html index f0e47db20..868a94a5e 100644 --- a/hooks/useThrottle/index.html +++ b/hooks/useThrottle/index.html @@ -26,7 +26,7 @@ options?: Options );

Params

参数说明类型默认值
value需要节流的值Ref<any>-
options配置节流的行为Options-

Options

参数说明类型默认值
wait等待时间,单位为毫秒number1000
leading是否在延迟开始前调用函数booleantrue
trailing是否在延迟开始后调用函数booleantrue

Source

源码文档示例

- + diff --git a/hooks/useThrottleFn/index.html b/hooks/useThrottleFn/index.html index 899d046a1..62cc392f6 100644 --- a/hooks/useThrottleFn/index.html +++ b/hooks/useThrottleFn/index.html @@ -34,7 +34,7 @@ options?: Options );

Params

参数说明类型默认值
fn需要节流的函数(...args: any[]) => any-
options配置节流的行为Options-

Options

参数说明类型默认值
wait等待时间,单位为毫秒number1000
leading是否在延迟开始前调用函数booleantrue
trailing是否在延迟开始后调用函数booleantrue

Result

参数说明类型
run触发执行 fn,函数参数将会传递给 fn(...args: any[]) => any
cancel取消当前节流() => void
flush当前节流立即调用() => void

Source

源码文档示例

- + diff --git a/hooks/useTimeout/index.html b/hooks/useTimeout/index.html index 1a778449b..45a19311c 100644 --- a/hooks/useTimeout/index.html +++ b/hooks/useTimeout/index.html @@ -32,7 +32,7 @@ } ): fn: () => void;

Params

参数说明类型
fn待执行函数() => void
delay定时时间(单位为毫秒),支持动态变化,,当取值为 undefined 时会停止计时器Ref<number | undefined >|number | undefined
immediate是否在首次立即执行boolean

Result

参数说明类型
clearTimeout清除定时器() => void

Source

源码文档示例

- + diff --git a/hooks/useTitle/index.html b/hooks/useTitle/index.html index 6b49332ea..06a841e8a 100644 --- a/hooks/useTitle/index.html +++ b/hooks/useTitle/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useTitle

改变浏览器 title 的 Hook

代码演示

API

useTitle(title: string, options?: Options);
 
useTitle(title: string, options?: Options);
 

Params

参数说明类型默认值
title页面标题Ref<string>-

Options

参数说明类型默认值
restoreOnUnmount组件卸载时,是否恢复上一个页面标题booleanfalse

Source

源码文档示例

- + diff --git a/hooks/useToggle/index.html b/hooks/useToggle/index.html index 8d9aabef6..e78d72b6a 100644 --- a/hooks/useToggle/index.html +++ b/hooks/useToggle/index.html @@ -24,7 +24,7 @@ const [state, { toggle, set, setLeft, setRight }] = useToggle<T>(defaultValue: T); const [state, { toggle, set, setLeft, setRight }] = useToggle<T, U>(defaultValue: T, reverseValue: U);

Params

参数说明类型默认值
defaultValue可选项,传入默认的状态值Tfalse
reverseValue可选项,传入取反的状态值U-

Result

参数说明类型
state状态值Readonly<Ref<any>>
actions操作集合Actions

Actions

参数说明类型
toggle切换 state() => void
set设置 state(state: T | U) => void
setLeft设置为 defaultValue() => void
setRight如果传入了 reverseValue, 则设置为 reverseValue。 否则设置为 defautValue 的反值() => void

Source

源码文档示例

- + diff --git a/hooks/useTrackedEffect/index.html b/hooks/useTrackedEffect/index.html index 1073e4688..b5bd7723a 100644 --- a/hooks/useTrackedEffect/index.html +++ b/hooks/useTrackedEffect/index.html @@ -26,7 +26,7 @@ deps?: deps, )

Source

源码文档示例

- + diff --git a/hooks/useUpdate/index.html b/hooks/useUpdate/index.html index e5ce56d50..577b6c1ec 100644 --- a/hooks/useUpdate/index.html +++ b/hooks/useUpdate/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useUpdate

用于模拟重新渲染页面

代码演示

基础用法

高级用法

API

const update = useUpdate()
 
const update = useUpdate()
 

注意

通过改变变量,监听这个变量达到模拟的效果

Source

源码文档示例

- + diff --git a/hooks/useUrlState/index.html b/hooks/useUrlState/index.html index 6166f56f0..f87855067 100644 --- a/hooks/useUrlState/index.html +++ b/hooks/useUrlState/index.html @@ -34,7 +34,7 @@ localStorageKey?: string }

Params

参数说明类型默认值
initialState默认值S | () => S-
options设置localStorageKey的话,若 url 没有参数,会使用存在 localStorage 的值UseUrlStateOptions-
routerPushFn一般来说,传 vue-router 的 router.push方法就行function-

Result

参数说明类型
state状态值-

Source

源码文档示例

- + diff --git a/hooks/useVirtualList/index.html b/hooks/useVirtualList/index.html index 2ed21aad1..d43bf7386 100644 --- a/hooks/useVirtualList/index.html +++ b/hooks/useVirtualList/index.html @@ -20,7 +20,7 @@
Skip to content
On this page

useVirtualList

快速使用虚拟列表

代码演示

基本用法

动态元素高度

API

import { useVirtualList } from 'vue-hooks-plus'
 
import { useVirtualList } from 'vue-hooks-plus'
 

Params

参数说明类型默认值
list包含大量数据的列表Ref<T[]>[]
options配置项Options-

Options

参数说明类型默认值
wrapperTarget内部容器,支持 DOM 节点或者 Ref 对象Ref<TargetValue<HTMLElement>>-
itemHeight行高度,静态高度可以直接写入像素值,动态高度可传入函数`number((index: number, data: T) => number)`
overscan视区上、下额外展示的 DOM 节点数量number5

Result

参数说明类型默认值
list当前需要展示的列表内容Ref<{ data: T, index: number }[]>-
ref外部容器,支持 DOM 节点或者 Ref 对象Ref<TargetValue<HTMLElement>>-
onScroll外部容器滚动绑定(e: any) => void-

Source

源码文档示例

- + diff --git a/hooks/useWebSocket/index.html b/hooks/useWebSocket/index.html index ece0ad607..7f5afe5bc 100644 --- a/hooks/useWebSocket/index.html +++ b/hooks/useWebSocket/index.html @@ -72,7 +72,7 @@ useWebSocket(socketUrl: string, options?: Options): Result;

Params

参数说明类型默认值
socketUrl必填,webSocket 地址string-
options可选,连接配置项Options-

Options

参数说明类型默认值
onOpenwebSocket 连接成功回调(event: WebSocketEventMap['open'], instance: WebSocket) => void-
onClosewebSocket 关闭回调(event: WebSocketEventMap['close'], instance: WebSocket) => void-
onMessagewebSocket 收到消息回调(message: WebSocketEventMap['message'], instance: WebSocket) => void-
onErrorwebSocket 错误回调(event: WebSocketEventMap['error'], instance: WebSocket) => void-
reconnectLimit重试次数number3
reconnectInterval重试时间间隔(ms)number3000
manual手动启动连接booleanfalse
protocols子协议string | string[]-

Result

参数说明类型
latestMessage最新消息Ref<WebSocketEventMap['message']>
sendMessage发送消息函数WebSocket['send']
disconnect手动断开 webSocket 连接() => void
connect手动连接 webSocket,如果当前已有连接,则关闭后重新连接() => void
readyState当前 webSocket 连接状态Ref<ReadyState>
webSocketInswebSocket 实例WebSocket

Source

源码文档示例

- + diff --git a/hooks/useWhyDidYouUpdate/index.html b/hooks/useWhyDidYouUpdate/index.html index dcee6ade1..040cca0fd 100644 --- a/hooks/useWhyDidYouUpdate/index.html +++ b/hooks/useWhyDidYouUpdate/index.html @@ -22,7 +22,7 @@
type IProps = Record<string, any>;
 useWhyDidYouUpdate(componentName: string, props: IProps): void;
 

Params

参数说明类型默认值
componentName必填,观测组件的名称string-
props必填,需要观测的数据(当前组件 state 或者传入的 props 等可能导致 rerender 的数据)Proxy<object>-

Result

打开控制台,可以看到改变的属性。

Source

源码文档示例

- + diff --git a/hooks/useWinResize/index.html b/hooks/useWinResize/index.html index 279b3e1e7..eebc66bde 100644 --- a/hooks/useWinResize/index.html +++ b/hooks/useWinResize/index.html @@ -24,7 +24,7 @@ handler: (ev: Event) => void, );

Params

参数说明类型默认值
handler处理函数(ev: Event) => void-

Source

源码文档示例

- + diff --git a/hooks/useWorker/index.html b/hooks/useWorker/index.html index 1bf122aee..f29a9706c 100644 --- a/hooks/useWorker/index.html +++ b/hooks/useWorker/index.html @@ -30,7 +30,7 @@ import { VueHooksPlusUseWorkerResolver } from '@vue-hooks-plus/resolvers'

使用方法

代码演示

Source

源码文档示例

- +