From 37af4bc092affa0336b084c7bac8bfdbb07c5ae1 Mon Sep 17 00:00:00 2001 From: Null <7566349+zhongjiayao@user.noreply.gitee.com> Date: Wed, 14 Aug 2024 12:04:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(zhongjiayao=5Fv3=5Fhooks):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=20useOnline=20Hook=20=E4=BB=A5=E6=A3=80=E6=9F=A5?= =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E5=9C=A8=E7=BA=BF=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 返回浏览器的在线状态 --- docs/.vitepress/generate-router.js | 2 +- docs/useOnline/demo/index.vue | 8 ++++++ docs/useOnline/index.md | 4 +++ packages/hooks/CHANGELOG.md | 7 +++++ packages/hooks/package.json | 2 +- packages/hooks/src/index.ts | 4 ++- packages/hooks/src/useOnline/demo/index.vue | 8 ++++++ packages/hooks/src/useOnline/index.md | 4 +++ packages/hooks/src/useOnline/index.ts | 31 +++++++++++++++++++++ packages/hooks/src/useOnline/meta.json | 3 ++ 10 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 docs/useOnline/demo/index.vue create mode 100644 docs/useOnline/index.md create mode 100644 packages/hooks/CHANGELOG.md create mode 100644 packages/hooks/src/useOnline/demo/index.vue create mode 100644 packages/hooks/src/useOnline/index.md create mode 100644 packages/hooks/src/useOnline/index.ts create mode 100644 packages/hooks/src/useOnline/meta.json diff --git a/docs/.vitepress/generate-router.js b/docs/.vitepress/generate-router.js index 11f6638..a515759 100644 --- a/docs/.vitepress/generate-router.js +++ b/docs/.vitepress/generate-router.js @@ -1,6 +1,6 @@ const Router = { Dom: ['useClickAway', 'useEventListener', "useFullscreen", 'useHover', 'useRect', "useTitle", 'useWindowSize', "useDocumentVisibility", "useVirtualList", "useResizeObserver", "useElementBounding"], - State: ["useBoolean", "useDebounce", "useLocalStorage", "useThrottle", 'useToggle'], + State: ["useBoolean", "useDebounce", "useLocalStorage", "useThrottle", 'useToggle', "useOnline"], Worker: ['useCountDown'], Effect: ["useDebounceFn", "useThrottleFn"] }; diff --git a/docs/useOnline/demo/index.vue b/docs/useOnline/demo/index.vue new file mode 100644 index 0000000..fa7f8f1 --- /dev/null +++ b/docs/useOnline/demo/index.vue @@ -0,0 +1,8 @@ + + + diff --git a/docs/useOnline/index.md b/docs/useOnline/index.md new file mode 100644 index 0000000..0cc8da8 --- /dev/null +++ b/docs/useOnline/index.md @@ -0,0 +1,4 @@ +# useOnline + +返回浏览器的在线状态。参考 [Navigator：onLine 属性](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/onLine) + diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md new file mode 100644 index 0000000..b841815 --- /dev/null +++ b/packages/hooks/CHANGELOG.md @@ -0,0 +1,7 @@ +# zhongjiayao_v3_hooks + +## 1.1.0 + +### Minor Changes + +- 新增 useOnline Hook 以检查浏览器在线状态 diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 41a46f4..213524f 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -1,6 +1,6 @@ { "name": "zhongjiayao_v3_hooks", - "version": "1.0.0", + "version": "1.1.0", "description": "vue3 业务 Hooks", "main": "./lib/index.js", "module": "./es/index.js", diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 0e37781..8b88ca0 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -17,6 +17,7 @@ import useDocumentVisibility from "./useDocumentVisibility"; import useVirtualList from "./useVirtualList"; import useResizeObserver from "./useResizeObserver"; import useElementBounding from "./useElementBounding"; +import useOnline from "./useOnline"; export { useBoolean, useToggle, @@ -36,5 +37,6 @@ export { useDocumentVisibility, useVirtualList, useResizeObserver, - useElementBounding + useElementBounding, + useOnline }; \ No newline at end of file diff --git a/packages/hooks/src/useOnline/demo/index.vue b/packages/hooks/src/useOnline/demo/index.vue new file mode 100644 index 0000000..fa7f8f1 --- /dev/null +++ b/packages/hooks/src/useOnline/demo/index.vue @@ -0,0 +1,8 @@ + + + diff --git a/packages/hooks/src/useOnline/index.md b/packages/hooks/src/useOnline/index.md new file mode 100644 index 0000000..0cc8da8 --- /dev/null +++ b/packages/hooks/src/useOnline/index.md @@ -0,0 +1,4 @@ +# useOnline + +返回浏览器的在线状态。参考 [Navigator：onLine 属性](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/onLine) + diff --git a/packages/hooks/src/useOnline/index.ts b/packages/hooks/src/useOnline/index.ts new file mode 100644 index 0000000..9063393 --- /dev/null +++ b/packages/hooks/src/useOnline/index.ts @@ -0,0 +1,31 @@ +import { ref, onMounted, onUnmounted } from 'vue'; +import useEventListener from '../useEventListener'; + +/** + * @description 用户网络是否可用 + * */ +function useOnline() { + const online = ref(true); + const showStatus = (val) => { + online.value = typeof val == 'boolean' ? val : val.target.online; + }; + + // 在页面加载后，设置正确的网络状态 + navigator.onLine ? showStatus(true) : showStatus(false); + + onMounted(() => { + // 开始监听网络状态的变化 + window.addEventListener('online', showStatus); + + window.addEventListener('offline', showStatus); + }); + onUnmounted(() => { + // 移除监听网络状态的变化 + window.removeEventListener('online', showStatus); + + window.removeEventListener('offline', showStatus); + }); + + return { online }; +} +export default useOnline; diff --git a/packages/hooks/src/useOnline/meta.json b/packages/hooks/src/useOnline/meta.json new file mode 100644 index 0000000..7f7be6d --- /dev/null +++ b/packages/hooks/src/useOnline/meta.json @@ -0,0 +1,3 @@ +{ + "type": "State" +}