feat(zhongjiayao_v3_hooks): 新增 useOnline Hook 以检查浏览器在线状态

返回浏览器的在线状态

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"]
 };

docs/useOnline/demo/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>状态：{{ online ? '在线' : '离线' }}</div>
+</template>
+
+<script setup>
+  import { useOnline } from 'zhongjiayao_v3_hooks';
+  const { online } = useOnline();
+</script>

docs/useOnline/index.md

@@ -0,0 +1,4 @@
+# useOnline
+
+返回浏览器的在线状态。参考 [Navigator：onLine 属性](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/onLine)
+<preview path="./demo/index.vue" title="基本使用" description='useOnline'></preview>

packages/hooks/CHANGELOG.md

@@ -0,0 +1,7 @@
+# zhongjiayao_v3_hooks
+
+## 1.1.0
+
+### Minor Changes
+
+- 新增 useOnline Hook 以检查浏览器在线状态

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",

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
 };

packages/hooks/src/useOnline/demo/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>状态：{{ online ? '在线' : '离线' }}</div>
+</template>
+
+<script setup>
+  import { useOnline } from 'zhongjiayao_v3_hooks';
+  const { online } = useOnline();
+</script>

packages/hooks/src/useOnline/index.md

@@ -0,0 +1,4 @@
+# useOnline
+
+返回浏览器的在线状态。参考 [Navigator：onLine 属性](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/onLine)
+<preview path="./demo/index.vue" title="基本使用" description='useOnline'></preview>

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;

packages/hooks/src/useOnline/meta.json

@@ -0,0 +1,3 @@
+{
+  "type": "State"
+}