Vue 全屏的解决方法

今天想起来一道面试题是关于如何将页面全屏操作的，特此总结一波我所了解到的知识点

1、原生

原生提供了两种方式可以实现页面的全屏操作

_1 、Document.exitFullscreen() 此方法请求从全屏模式切换到窗口模式，他的返回值是一个promise对象，在全屏模式全部关闭后会被置为resolved状态。

_2、 Element.requestFullscreen() 此方法请求浏览器将特定元素，甚至于他的后代变为全屏模式，并且隐藏页面上所有的UI，以及其他应用，他的返回值也是一个promise对象，在全屏模式激活时会被置为resolved状态。

 但是原生写法过于繁琐，而且api不是很好用。

全屏 API - Web API 接口参考 | MDN   原生接口文档

2、插件

screenfull插件

安装 

npm install --save screenfull

 导入

import screenfull from "screenfull";

然后我们使用他的方法toggle，screefull.toggle()来切换全屏模式了，这个方法必须使用一个UI去触发他，然后我们也可以screenfull.isEnabled()判断浏览器是否支持全屏。

按照我们的逻辑，当浏览器切换全屏时，一些UI或者组件是会改变他当前的状态了，fullscreen也为我们提供了一个类似于事件监听器的方法，screenfull.onchange(callback)，来注册一个监听事件，当切换全屏或者切换窗口模式时，触发相对应的回调。他还有一种写法，screenfull.on('change',callback)，在js中我们也是用on绑定事件的，当然我们也是用off来注销监听事件的。

我们绑定一个监听事件，是需要一个浏览器状态的，不然我们无法知道我们的回调函数作用于何种状态，可以用screen.isFullscreen来判断浏览器是否是全局状态。

3、Vue

import {  ref } from "vue";

//判断浏览器是否支持全屏
let isSupport=document.fullscreenEnabled
//给全屏一个判断状态,全屏时为true，窗口为false
let isFull=ref(false)
//监听全屏状态，在浏览器支持全屏的条件下，当前元素是否是全屏
//document.fullscreenElement 当前展示为全屏模式的元素
const screenchange = () => {
	if (isSupport) {
		document.fullscreenElement ? isFullscreen.value = true : isFullscreen.value = false
	}
};
//注册监听
document.addEventListener("fullscreenchange", screenchange , true);

//点击 切换屏幕状态
const togggle=()=>{
if (isSupport) {
		if (document.fullscreenElement) {
            //document.exitFullscreen()退出全屏模式的方法
			document.exitFullscreen();
			isFullscreen.value = false;
		} else {
			//requestFullscreen(),请求全屏的方法
			document.documentElement.requestFullscreen();
			isFullscreen.value = true;
		}
	}

}