全屏与退出全屏功能
📄 Fullscreen API 使用说明
通过浏览器提供的 Fullscreen API，你可以实现在任意 HTML 元素上的全屏展示与退出全屏效果，适用于视频播放器、看图模式、报表展示等场景。
🧩 功能说明
- 支持进入全屏
- 支持退出全屏
- 支持检测当前是否处于全屏状态
- 兼容多浏览器前缀
- 可封装为 Vue / React 组件
📦 使用示例（原生 JavaScript）
进入全屏
function enterFullscreen(el = document.documentElement) {if (el.requestFullscreen) {el.requestFullscreen();} else if (el.webkitRequestFullscreen) {el.webkitRequestFullscreen();} else if (el.mozRequestFullScreen) {el.mozRequestFullScreen();} else if (el.msRequestFullscreen) {el.msRequestFullscreen();}
}
退出全屏
function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}
}
判断是否全屏
function isFullscreen() {return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
}
切换全屏
function toggleFullscreen() {if (isFullscreen()) {exitFullscreen();} else {enterFullscreen();}
}
🚀 Vue 3 组合式封装
import { ref } from 'vue';const isFull = ref(false);function toggleFullscreen(el: HTMLElement = document.documentElement) {if (!isFull.value) {el.requestFullscreen?.();isFull.value = true;} else {document.exitFullscreen?.();isFull.value = false;}
}export { toggleFullscreen, isFull };
📡 监听全屏变化（可选）
document.addEventListener('fullscreenchange', () => {console.log('全屏状态变更：', !!document.fullscreenElement);
});