前端一键全屏通过点击事件，实现一键全屏。一个Npm包就搞定。import { useFullscreen } from

安装vueuse/core包

    import { useFullscreen } from "@vueuse/core";

    const { isFullscreen, toggle } = useFullscreen();

toggle是点击事件 isFullscreen是全屏状态为布尔值

使用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>