<template> <Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5"> <span @click="toggle"> <FullscreenOutlined v-if="!isFullscreen" /> <FullscreenExitOutlined v-else /> </span> </Tooltip> </template> <script lang="ts"> import { defineComponent, computed, unref } from 'vue'; import { Tooltip } from 'ant-design-vue'; import { useI18n } from '/@/hooks/web/useI18n'; import { useFullscreen } from '@vueuse/core'; import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'; export default defineComponent({ name: 'FullScreen', components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip }, setup() { const { t } = useI18n(); const { toggle, isFullscreen } = useFullscreen(); // 重新检查全屏状态 isFullscreen.value = !!( document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement ); const getTitle = computed(() => { return unref(isFullscreen) ? t('layout.header.tooltipExitFull') : t('layout.header.tooltipEntryFull'); }); return { getTitle, isFullscreen, toggle, }; }, }); </script>