requestFullscreen API 实现局部全屏

        在使用 RuoYi项目时，系统自带的全屏按钮以及浏览器 F11 快捷键，都只能实现整个页面的全屏展示。         然而在大屏可视化项目中，我只希望让内部的大屏内容全屏显示，而不是连左侧菜单、顶部导航栏、面包屑一起全屏。

举个例子：

• F11 全屏 → 菜单、导航栏、面包屑都还在，占据屏幕空间

• RuoYi 默认全屏按钮 → 同样的问题

• 我们需要的是仅让大屏主体区域占满整个屏幕，方便展示数据可视化内容

        HTML5 提供了 requestFullscreen API，可以让任意 DOM 元素进入全屏模式，并且通过 exitFullscreen 退出。结合事件监听 fullscreenchange（及厂商前缀版本），我们可以实现：

• 点击按钮 → 局部元素进入全屏

• 点击按钮或按 Esc → 退出全屏

• 图标实时变化 → 根据 isFullscreen 状态切换放大/缩小图标

        RuoYi 默认的全屏功能适合后台管理场景，但在大屏展示项目中，全屏往往需要更专注于核心内容。         通过 HTML5 requestFullscreen API + 多浏览器兼容处理，我们可以轻松实现局部元素全屏，让数据展示更沉浸、体验更好。

实现代码

        我已将这段代码封装为一个 Vue 组件，也写好了使用示例，方便在大屏项目中直接使用。

https://gitee.com/CongyuSAMA/fullscreen

下面是基于 Vue 3 + RuoYi 项目改造的实现代码：

<template>
<img
:src="isFullscreen ? shrinkImg : magnifyImg"
alt="全屏切换"
class="fullscreen-icon"
@click="toggleFullscreen"
/>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const isFullscreen = ref(false)
const magnifyImg = new URL('@/assets/bigview_img/magnify.png', import.meta.url).href
const shrinkImg = new URL('@/assets/bigview_img/shrink.png', import.meta.url).href

// 全屏切换
const toggleFullscreen = () => {
const dashboardElement = document.querySelector('.dashboard')
if (!isFullscreen.value) {
if (dashboardElement.requestFullscreen) {
dashboardElement.requestFullscreen()
} else if (dashboardElement.webkitRequestFullscreen) {
dashboardElement.webkitRequestFullscreen()
} else if (dashboardElement.msRequestFullscreen) {
dashboardElement.msRequestFullscreen()
} else if (dashboardElement.mozRequestFullScreen) {
dashboardElement.mozRequestFullScreen()
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
}
}
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
const fullscreenElement =
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement

isFullscreen.value = !!fullscreenElement
}

onMounted(() => {
document.addEventListener('fullscreenchange', handleFullscreenChange)
document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
document.addEventListener('msfullscreenchange', handleFullscreenChange)
document.addEventListener('mozfullscreenchange', handleFullscreenChange)
})

onBeforeUnmount(() => {
document.removeEventListener('fullscreenchange', handleFullscreenChange)
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
document.removeEventListener('msfullscreenchange', handleFullscreenChange)
document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
})
</script>

<style>
.fullscreen-icon {
cursor: pointer;
width: 24px;
height: 24px;
}
</style>