feat(hooks): "新增useDocumentVisibility钩子以检测页面可见性"

"新增useDocumentVisibility钩子以检测页面可见性"

docs/.vitepress/generate-router.js

@@ -1,7 +1,7 @@
 const Router = {
-  Dom: ['useClickAway', 'useEventListener', "useFullscreen", 'useHover', 'useRect', "useTitle", 'useWindowSize'],
+  Dom: ['useClickAway', 'useEventListener', "useFullscreen", 'useHover', 'useRect', "useTitle", 'useWindowSize', "useDocumentVisibility"],
   State: ["useBoolean", "useDebounce", "useLocalStorage", "useThrottle", 'useToggle'],
   Worker: ['useCountDown'],
-  Effect: ["useDebounceFn", "useThrottleFn"],
+  Effect: ["useDebounceFn", "useThrottleFn"]
 };
 export default Router;

docs/useDocumentVisibility/demo/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>{{ documentVisibility }}</div>
+</template>
+
+<script setup>
+  import { useDocumentVisibility } from 'zhongjiayao_v3_hooks';
+
+  const documentVisibility = useDocumentVisibility();
+</script>

docs/useDocumentVisibility/index.md

@@ -0,0 +1,11 @@
+# useDocumentVisibility
+
+监听页面是否可见，参考 [visibilityState API](https://developer.mozilla.org/docs/Web/API/Document/visibilityState)
+
+<preview path="./demo/index.vue" title="基本使用" description='监听 document 的可见状态'></preview>
+
+### Result
+
+| 参数               | 说明                           | 类型                                               |
+| ------------------ | ------------------------------ | -------------------------------------------------- |
+| documentVisibility | 判断 document 是否处于可见状态 | `visible`\| `hidden` \| `prerender` \| `undefined` |

packages/hooks/src/index.ts

@@ -13,6 +13,7 @@ import useDebounceFn from './useDebounceFn';
 import useThrottle from './useThrottle';
 import useThrottleFn from './useThrottleFn';
 import useTitle from './useTitle';
+import useDocumentVisibility from "./useDocumentVisibility";
 export {
   useBoolean,
   useToggle,
@@ -28,5 +29,6 @@ export {
   useDebounceFn,
   useThrottle,
   useThrottleFn,
-  useTitle
+  useTitle,
+  useDocumentVisibility
 };

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

@@ -0,0 +1,9 @@
+<template>
+  <div>{{ documentVisibility }}</div>
+</template>
+
+<script setup>
+  import { useDocumentVisibility } from 'zhongjiayao_v3_hooks';
+
+  const documentVisibility = useDocumentVisibility();
+</script>

packages/hooks/src/useDocumentVisibility/index.md

@@ -0,0 +1,11 @@
+# useDocumentVisibility
+
+监听页面是否可见，参考 [visibilityState API](https://developer.mozilla.org/docs/Web/API/Document/visibilityState)
+
+<preview path="./demo/index.vue" title="基本使用" description='监听 document 的可见状态'></preview>
+
+### Result
+
+| 参数               | 说明                           | 类型                                               |
+| ------------------ | ------------------------------ | -------------------------------------------------- |
+| documentVisibility | 判断 document 是否处于可见状态 | `visible`\| `hidden` \| `prerender` \| `undefined` |

packages/hooks/src/useDocumentVisibility/index.ts

@@ -0,0 +1,29 @@
+import { ref, Ref } from 'vue';
+import { isBrowser } from '../utils';
+import useEventListener from '../useEventListener';
+
+type VisibilityState = 'hidden' | 'visible' | 'prerender' | undefined;
+
+const getVisibility = () => {
+  if (!isBrowser) {
+    return 'visible';
+  }
+  return document.visibilityState;
+};
+
+function useDocumentVisibility(): VisibilityState {
+  // 创建一个 ref 来存储文档的可见性状态
+  const documentVisibility: Ref<VisibilityState> = ref(getVisibility());
+
+  const handleVisibilityChange = () => {
+    if (typeof document !== 'undefined') {
+      documentVisibility.value = document.visibilityState;
+    }
+  };
+
+  useEventListener('visibilitychange', handleVisibilityChange, { target: document });
+
+  return documentVisibility.value;
+}
+
+export default useDocumentVisibility;

packages/hooks/src/useDocumentVisibility/meta.json

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