提交 979058ad 编写于 作者: V Vben

perf: refoctor useTitle

上级 3b3a7462
## Wip
### ✨ Refactor
- 移除 useFullScreen 函数
## 2.1.1 (2021-03-26)
### ✨ Features
......
......@@ -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();
......
......@@ -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,
};
},
......
......@@ -8,7 +8,7 @@ interface Params {
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]]);
}
......
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,
};
}
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}`;
});
}
<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,
};
},
});
......
......@@ -3,7 +3,6 @@ import router from '/@/router';
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 @@ createPageLoadingGuard(router);
createHttpGuard(router);
createScrollGuard(router);
createMessageGuard(router);
createTitleGuard(router);
createProgressGuard(router);
createPermissionGuard(router);
createStateGuard(router);
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;
});
}
......@@ -62,35 +62,6 @@ export function getDynamicProps<T, U>(props: T): Partial<U> {
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;
......
<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,
};
},
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册