From 979058ad95d9669cb113033f76b5dafb932aad0f Mon Sep 17 00:00:00 2001
From: Vben <anncwb@126.com>
Date: 星期六, 27 三月 2021 16:03:28 +0800
Subject: [PATCH] perf: refoctor useTitle
---
/dev/null | 18 ------
src/utils/index.ts | 29 ---------
src/hooks/core/useAttrs.ts | 2
src/layouts/default/header/components/FullScreen.vue | 13 ++--
src/views/demo/feat/full-screen/index.vue | 34 ++++-------
src/hooks/web/useTitle.ts | 22 +++++++
CHANGELOG.zh_CN.md | 6 ++
src/App.vue | 9 ++-
src/components/Table/src/components/settings/FullScreenSetting.vue | 13 ++--
src/router/guard/index.ts | 2
10 files changed, 61 insertions(+), 87 deletions(-)
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 08cac81..f879b4c 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,9 @@
+## Wip
+
+### 鉁� Refactor
+
+- 绉婚櫎 useFullScreen 鍑芥暟
+
## 2.1.1 (2021-03-26)
### 鉁� Features
diff --git a/src/App.vue b/src/App.vue
index 9b45da5..64e6203 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,18 +14,21 @@
import { initAppConfigStore } from '/@/logics/initAppConfig';
import { useLockPage } from '/@/hooks/web/useLockPage';
+ import { useTitle } from '/@/hooks/web/useTitle';
import { useLocale } from '/@/locales/useLocale';
export default defineComponent({
name: 'App',
components: { ConfigProvider, AppProvider },
setup() {
- // support Multi-language
- const { getAntdLocale } = useLocale();
-
// Initialize vuex internal system configuration
initAppConfigStore();
+ useTitle();
+
+ // support Multi-language
+ const { getAntdLocale } = useLocale();
+
// Create a lock screen monitor
const lockEvent = useLockPage();
diff --git a/src/components/Table/src/components/settings/FullScreenSetting.vue b/src/components/Table/src/components/settings/FullScreenSetting.vue
index 9fae869..8cc1a12 100644
--- a/src/components/Table/src/components/settings/FullScreenSetting.vue
+++ b/src/components/Table/src/components/settings/FullScreenSetting.vue
@@ -3,8 +3,8 @@
<template #title>
<span>{{ t('component.table.settingFullScreen') }}</span>
</template>
- <FullscreenOutlined @click="toggleFullscreen" v-if="!isFullscreenRef" />
- <FullscreenExitOutlined @click="toggleFullscreen" v-else />
+ <FullscreenOutlined @click="toggle" v-if="!isFullscreen" />
+ <FullscreenExitOutlined @click="toggle" v-else />
</Tooltip>
</template>
<script lang="ts">
@@ -12,7 +12,8 @@
import { Tooltip } from 'ant-design-vue';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
- import { useFullscreen } from '/@/hooks/web/useFullScreen';
+ import { useFullscreen } from '@vueuse/core';
+
import { useI18n } from '/@/hooks/web/useI18n';
import { useTableContext } from '../../hooks/useTableContext';
@@ -27,11 +28,11 @@
setup() {
const table = useTableContext();
const { t } = useI18n();
- const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef);
+ const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
return {
- toggleFullscreen,
- isFullscreenRef,
+ toggle,
+ isFullscreen,
t,
};
},
diff --git a/src/hooks/core/useAttrs.ts b/src/hooks/core/useAttrs.ts
index 3206f3a..cd745dd 100644
--- a/src/hooks/core/useAttrs.ts
+++ b/src/hooks/core/useAttrs.ts
@@ -8,7 +8,7 @@
const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
const LISTENER_PREFIX = /^on[A-Z]/;
-export function entries<T>(obj: Hash<T>): [string, T][] {
+export function entries<T>(obj: Recordable<T>): [string, T][] {
return Object.keys(obj).map((key: string) => [key, obj[key]]);
}
diff --git a/src/hooks/web/useFullScreen.ts b/src/hooks/web/useFullScreen.ts
deleted file mode 100644
index 0e5bef5..0000000
--- a/src/hooks/web/useFullScreen.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Ref, ref, unref } from 'vue';
-
-type RFSMethodName =
- | 'webkitRequestFullScreen'
- | 'requestFullscreen'
- | 'msRequestFullscreen'
- | 'mozRequestFullScreen';
-type EFSMethodName =
- | 'webkitExitFullscreen'
- | 'msExitFullscreen'
- | 'mozCancelFullScreen'
- | 'exitFullscreen';
-type FSEPropName =
- | 'webkitFullscreenElement'
- | 'msFullscreenElement'
- | 'mozFullScreenElement'
- | 'fullscreenElement';
-
-export function useFullscreen(
- target: Ref<Nullable<HTMLElement>> | Nullable<HTMLElement> = ref(document.documentElement),
- options?: FullscreenOptions
-) {
- const isFullscreenRef = ref(false);
- const el = document.documentElement;
- let RFC_METHOD_NAME: RFSMethodName = 'requestFullscreen';
- let EFS_METHOD_NAME: EFSMethodName = 'exitFullscreen';
- let FSE_PROP_NAME: FSEPropName = 'fullscreenElement';
-
- if ('webkitRequestFullScreen' in el) {
- RFC_METHOD_NAME = 'webkitRequestFullScreen';
- EFS_METHOD_NAME = 'webkitExitFullscreen';
- FSE_PROP_NAME = 'webkitFullscreenElement';
- } else if ('msRequestFullscreen' in el) {
- RFC_METHOD_NAME = 'msRequestFullscreen';
- EFS_METHOD_NAME = 'msExitFullscreen';
- FSE_PROP_NAME = 'msFullscreenElement';
- } else if ('mozRequestFullScreen' in el) {
- RFC_METHOD_NAME = 'mozRequestFullScreen';
- EFS_METHOD_NAME = 'mozCancelFullScreen';
- FSE_PROP_NAME = 'mozFullScreenElement';
- } else if (!('requestFullscreen' in el)) {
- throw new Error('褰撳墠娴忚鍣ㄤ笉鏀寔Fullscreen API !');
- }
- function enterFullscreen(): Promise<void> {
- isFullscreenRef.value = true;
- return (unref(target) as any)[RFC_METHOD_NAME](options);
- }
-
- function exitFullscreen(): Promise<void> {
- isFullscreenRef.value = false;
- return (document as any)[EFS_METHOD_NAME]();
- }
-
- function isFullscreen(): boolean {
- return unref(target) === (document as any)[FSE_PROP_NAME];
- }
-
- async function toggleFullscreen(): Promise<void> {
- if (!unref(target)) return;
- return isFullscreen() ? exitFullscreen() : enterFullscreen();
- }
-
- return {
- // watchFullscreen,
- toggleFullscreen,
- exitFullscreen,
- isFullscreen,
- enterFullscreen,
- isFullscreenRef,
- };
-}
diff --git a/src/hooks/web/useTitle.ts b/src/hooks/web/useTitle.ts
new file mode 100644
index 0000000..6943d7c
--- /dev/null
+++ b/src/hooks/web/useTitle.ts
@@ -0,0 +1,22 @@
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useTitle as usePageTitle } from '@vueuse/core';
+import { useGlobSetting } from '/@/hooks/setting';
+
+import { REDIRECT_NAME } from '/@/router/constant';
+import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+
+export function useTitle() {
+ const { title } = useGlobSetting();
+ const { t } = useI18n();
+
+ const pageTitle = usePageTitle();
+
+ listenerLastChangeTab((route) => {
+ if (route.name === REDIRECT_NAME) {
+ return;
+ }
+
+ const tTitle = t(route?.meta?.title as string);
+ pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
+ });
+}
diff --git a/src/layouts/default/header/components/FullScreen.vue b/src/layouts/default/header/components/FullScreen.vue
index 42a7ea5..374ee76 100644
--- a/src/layouts/default/header/components/FullScreen.vue
+++ b/src/layouts/default/header/components/FullScreen.vue
@@ -1,6 +1,6 @@
<template>
<Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5">
- <span @click="toggleFullscreen">
+ <span @click="toggle">
<FullscreenOutlined v-if="!isFullscreen" />
<FullscreenExitOutlined v-else />
</span>
@@ -10,7 +10,8 @@
import { defineComponent, computed, unref } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
- import { useFullscreen } from '/@/hooks/web/useFullScreen';
+ import { useFullscreen } from '@vueuse/core';
+
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
export default defineComponent({
name: 'FullScreen',
@@ -18,18 +19,18 @@
setup() {
const { t } = useI18n();
- const { toggleFullscreen, isFullscreenRef } = useFullscreen();
+ const { toggle, isFullscreen } = useFullscreen();
const getTitle = computed(() => {
- return unref(isFullscreenRef)
+ return unref(isFullscreen)
? t('layout.header.tooltipExitFull')
: t('layout.header.tooltipEntryFull');
});
return {
getTitle,
- isFullscreen: isFullscreenRef,
- toggleFullscreen,
+ isFullscreen,
+ toggle,
};
},
});
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index b66c15c..cf158a2 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -3,7 +3,6 @@
import { createProgressGuard } from './progressGuard';
import { createPermissionGuard } from './permissionGuard';
import { createPageLoadingGuard } from './pageLoadingGuard';
-import { createTitleGuard } from './titleGuard';
import { createMessageGuard } from './messageGuard';
import { createScrollGuard } from './scrollGuard';
import { createHttpGuard } from './httpGuard';
@@ -15,7 +14,6 @@
createHttpGuard(router);
createScrollGuard(router);
createMessageGuard(router);
-createTitleGuard(router);
createProgressGuard(router);
createPermissionGuard(router);
createStateGuard(router);
diff --git a/src/router/guard/titleGuard.ts b/src/router/guard/titleGuard.ts
deleted file mode 100644
index 997f53f..0000000
--- a/src/router/guard/titleGuard.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Router } from 'vue-router';
-
-import { useGlobSetting } from '/@/hooks/setting';
-
-import { setTitle } from '/@/utils';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-import { REDIRECT_NAME } from '/@/router/constant';
-
-const globSetting = useGlobSetting();
-
-export function createTitleGuard(router: Router) {
- router.afterEach(async (to) => {
- const { t } = useI18n();
- to.name !== REDIRECT_NAME && setTitle(t(to.meta.title as string), globSetting.title);
- return true;
- });
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 81bf432..ca45a10 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -62,35 +62,6 @@
return ret as Partial<U>;
}
-/**
- * set page Title
- * @param {*} title :page Title
- */
-function setDocumentTitle(title: string) {
- document.title = title;
- const ua = navigator.userAgent;
- const regex = /\bMicroMessenger\/([\d.]+)/;
- // 鍏煎
- if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
- const i = document.createElement('iframe');
- i.src = '/favicon.ico';
- i.style.display = 'none';
- i.onload = function () {
- setTimeout(function () {
- i.remove();
- }, 9);
- };
- document.body.appendChild(i);
- }
-}
-
-export function setTitle(title: string, appTitle?: string) {
- if (title) {
- const _title = title ? ` ${title} - ${appTitle} ` : `${appTitle}`;
- setDocumentTitle(_title);
- }
-}
-
export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
if (!route) return route;
const { matched, ...opt } = route;
diff --git a/src/views/demo/feat/full-screen/index.vue b/src/views/demo/feat/full-screen/index.vue
index 340685d..a8fa2c7 100644
--- a/src/views/demo/feat/full-screen/index.vue
+++ b/src/views/demo/feat/full-screen/index.vue
@@ -1,18 +1,12 @@
<template>
<PageWrapper title="鍏ㄥ睆绀轰緥">
<CollapseContainer class="w-full h-32 bg-white rounded-md" title="Window Full Screen">
- <a-button type="primary" @click="enterFullscreen" class="mr-2">
- Enter Window Full Screen
- </a-button>
- <a-button color="success" @click="toggleFullscreen" class="mr-2">
- Toggle Window Full Screen
- </a-button>
+ <a-button type="primary" @click="enter" class="mr-2"> Enter Window Full Screen </a-button>
+ <a-button color="success" @click="toggle" class="mr-2"> Toggle Window Full Screen </a-button>
- <a-button color="error" @click="exitFullscreen" class="mr-2">
- Exit Window Full Screen
- </a-button>
+ <a-button color="error" @click="exit" class="mr-2"> Exit Window Full Screen </a-button>
- Current State: {{ isFullscreenRef }}
+ Current State: {{ isFullscreen }}
</CollapseContainer>
<CollapseContainer class="w-full mt-5 bg-white rounded-md" title="Dom Full Screen">
@@ -30,27 +24,23 @@
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
- import { useFullscreen } from '/@/hooks/web/useFullScreen';
+ import { useFullscreen } from '@vueuse/core';
+
import { PageWrapper } from '/@/components/Page';
export default defineComponent({
components: { CollapseContainer, PageWrapper },
setup() {
const domRef = ref<Nullable<HTMLElement>>(null);
- const {
- enterFullscreen,
- toggleFullscreen,
- isFullscreenRef,
- exitFullscreen,
- } = useFullscreen();
+ const { enter, toggle, exit, isFullscreen } = useFullscreen();
- const { toggleFullscreen: toggleDom } = useFullscreen(domRef);
+ const { toggle: toggleDom } = useFullscreen(domRef);
return {
- enterFullscreen,
+ enter,
toggleDom,
- toggleFullscreen,
- isFullscreenRef,
- exitFullscreen,
+ toggle,
+ isFullscreen,
+ exit,
domRef,
};
},
--
Gitblit v1.8.0