<script lang="ts" setup>
|
import { computed, unref } from 'vue';
|
|
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
|
import { useFullscreen } from '@vueuse/core';
|
import { Tooltip } from 'ant-design-vue';
|
|
import { $t } from '#/locales';
|
|
defineOptions({ name: 'FullScreen' });
|
|
const { isFullscreen, toggle } = useFullscreen();
|
|
const getTitle = computed(() => (unref(isFullscreen) ? $t('layout.header.tooltipExitFull') : $t('layout.header.tooltipEntryFull')));
|
|
// 重新检查全屏状态
|
// @ts-ignore
|
isFullscreen.value = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
|
</script>
|
<template>
|
<Tooltip :mouse-enter-delay="0.5" :title="getTitle" placement="bottom">
|
<VbenIconButton @click="toggle" class="global-header-icon !mr-0 w-auto rounded-md px-[10px]">
|
<i class="icon-ym icon-ym-header-fullscreen-exit text-[16px] text-foreground" v-if="isFullscreen"></i>
|
<i class="icon-ym icon-ym-header-fullscreen text-[16px] text-foreground" v-else></i>
|
</VbenIconButton>
|
</Tooltip>
|
</template>
|
