xiaoming d1f0a3fd36
chore: 将全屏按钮置于顶部,使其显眼且易于操作 (#969)
* chore: 将全屏按钮置于顶部,使其显眼且易于操作
2024-03-12 14:36:45 +08:00

31 lines
656 B
Vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useNav } from "@/layout/hooks/useNav";
const screenIcon = ref();
const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
isFullscreen.value = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
watch(
isFullscreen,
full => {
screenIcon.value = full ? ExitFullscreen : Fullscreen;
},
{
immediate: true
}
);
</script>
<template>
<span class="fullscreen-icon navbar-bg-hover" @click="toggle">
<IconifyIconOffline :icon="screenIcon" />
</span>
</template>