Usar el complemento de pantalla completa de vue screenfull

Recientemente, en el proyecto de pantalla grande de vue, el complemento vue screenfull se puede utilizar para implementar el botón de pantalla completa de pantalla grande.

1. Instala screenfull en el directorio del proyecto

npm install?screenfull --save-dev

2. Introducirlo en el componente del proyecto

import?screenfull?from?'screenfull'

3. Usar el componente screenfull

1) Vincular evento de clic en div

2) Métodos de eventos de implementación

métodos:?{

clickFullscreen(){

if (!screenfull.isEnabled)? {

?this.$message({

mensaje:?El navegador no admite',

Escriba:?' Advertencia'

})

Devuelve falso

}

screenfull.toggle();

this.isFullscreen=true

?｝

* checkFull()?{

var?isFull?=?document.fullscreenEnabled?||?window.fullScreen?||?document.webkitIsFullScreen?| | ?document.msFullscreenEnabled;

?

Si (isFull===?undefinido)?{

?isFull?= ? false;

?｝

Return isFull;

}

3) Supervise si la pantalla actual está en pantalla completa para lograr la pantalla adaptación

mount()?{

?window.onresize?=?()? =>?{

//Monitorear si se presiona ESC durante tecla de pantalla completa

if(!this.checkFull())?{

?//?La operación que se realizará después de presionar la tecla esc en modo de pantalla completa

this.isFullscreen?=?false;

}

?｝

}?