Solución de pantalla completa Vue

Hoy recordé que una pregunta de la entrevista era sobre cómo operar la página en pantalla completa. A continuación resumo una ola de puntos de conocimiento que he aprendido.

1.originales

El nativo proporciona dos formas de realizar la operación de pantalla completa de la página.

_1, Document.exitFullscreen() Este método solicita cambiar del modo de pantalla completa al modo de ventana, y su valor de retorno es un objeto de promesa, que se establecerá en estado resuelto después de que se cierren todos los modos de pantalla completa.

_2, Element.requestFullscreen() Este método solicita al navegador que convierta un elemento específico, incluso sus descendientes, en modo de pantalla completa y oculte toda la interfaz de usuario de la página, así como otras aplicaciones. Su valor de retorno también es un objeto de promesa , en modo de pantalla completa. Cuando se active, se establecerá en el estado resuelto.

 Pero el método de escritura nativo es demasiado engorroso y la API no es muy fácil de usar.

API de pantalla completa: referencia de la interfaz API web |    Documentación de la interfaz nativa de MDN

2. Complementos

complemento de pantalla completa

Instalar 

npm install --save screenfull

 importar

import screenfull from "screenfull";

Luego usamos su método alternar, screefull.toggle() para cambiar el modo de pantalla completa. Este método debe usar una interfaz de usuario para activarlo, y luego también podemos usar screenfull.isEnabled() para determinar si el navegador admite pantalla completa. .

Según nuestra lógica, cuando el navegador cambia a pantalla completa, algunas UI o componentes cambiarán su estado actual, y la pantalla completa también nos proporciona un método similar a un detector de eventos, screenfull.onchange(callback), para registrar una escucha de eventos. y activa la devolución de llamada correspondiente al cambiar de pantalla completa o cambiar de modo de ventana. También tiene otra forma de escribir, screenfull.on('change', callback). En js, también usamos on para vincular eventos. Por supuesto, también usamos off para cerrar sesión en eventos de escucha.

Cuando vinculamos un evento de escucha, necesitamos un estado del navegador; de lo contrario, no podemos saber en qué estado actúa nuestra función de devolución de llamada. Podemos usar screen.isFullscreen para determinar si el navegador está en un estado global.

3、vista

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;
		}
	}

}