浏览器本身提供了对screenfull的API支持，但是需要考虑浏览的兼容性。如果跨浏览器使用 JavaScript 全屏 API，可以使用screenfull插件，该插件已对兼容性做了处理。

1、screenfull原生API

• 全局全屏

// 全局全屏
const screen = () => {let element = document.documentElement;// 不全屏是null,返回false,let isFull= document.fullscreenElement === null ? false : true;// 全屏状态切换if (isFull) {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();}} else {// 全屏if (element.requestFullscreen) {element.requestFullscreen();}}  
};

• 指定内容全屏

// 局部全屏
const partScreen = () => {/* 获取()元素以全屏显示页面 */const full = document.getElementById('mainContent');let isFull = document.fullscreenElement === null ? false : true;if (!isFull) {if (full && full.requestFullscreen) {full.requestFullscreen();}} else {if (document.exitFullscreen) {document.exitFullscreen();}}
};

如果考虑浏览器兼容性的话，完整的功能应该是

const openFullscreen = () => {/* 获取()元素以全屏显示页面 */const full = document.getElementById('mainContent');if (full.RequestFullScreen) {full.RequestFullscreen();} else if (full.mozRequestFullScreen) {//兼容Firefoxfull.mozRequestFullScreen();} else if (full.webkitRequestFullScreen) {//兼容Chrome, Safari and Opera等full.webkitRequestFullScreen();} else if (full.msRequestFullscreen) {//兼容IE/Edgefull.msRequestFullscreen();}
};const exitFullscreen = () => {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {//兼容Firefoxdocument.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {//兼容Chrome, Safari and Opera等document.webkitExitFullscreen();} else if (document.msExitFullscreen) {//兼容IE/Edgedocument.msExitFullscreen();}
};

2、screenfull插件

插件文档

安装

npm i screenfull

使用

import screenfull from 'screenfull';
// 使用screenfull插件
let isFullscreen = ref(false);
const plugin = () => {const element = document.getElementById('mainContent'); if (screenfull.isEnabled && !screenfull.isFullscreen) {screenfull.request(element);}isFullscreen.value = !screenfull.isFullscreen;screenfull.toggle();
};

浏览器支持情况

浏览器支持查看

参数

• isEnabled
  返回一个布尔值是否允许您进入全屏
• isFullscreen
  返回一个布尔值是否全屏处于活动状态
• toggle(element, options?)
  如果不活动则请求全屏，否则退出。
  接受一个 DOM 元素和FullscreenOptions.
  返回在元素进入/退出全屏后解决的承诺