initHeader

frontend/src/hooks/useOnline.ts

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+/**
+ * @description 网络是否可用
+ * */
+export const useOnline = () => {
+  const online = ref(true);
+  const showStatus = (val: any) => {
+    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 };
+};