1、vue页面中根据是否全屏判断当前显示icon图标，isFull为true时表示全屏，默认值为false，并绑定click事件

2、click全屏事件

fullScreenEvent: function() {

let el = document.documentElement;

if (this.isFull) {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

} else {

if (el.requestFullscreen) {

el.requestFullscreen();

} else if (el.mozRequestFullScreen) {

el.mozRequestFullScreen();

} else if (el.webkitRequestFullScreen) {

el.webkitRequestFullScreen();

} else if (el.msRequestFullscreen) {

el.msRequestFullscreen();

}

}

},

3、 页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发

mounted() {

let isFullscreen =

document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement ||

document.fullScreen ||

document.mozFullScreen ||

document.webkitIsFullScreen;

isFullscreen = !!isFullscreen;

let that = this;

document.addEventListener("fullscreenchange", () => {

that.isFull = !that.isFull;

});

document.addEventListener("mozfullscreenchange", () => {

that.isFull = !that.isFull;

});

document.addEventListener("webkitfullscreenchange", () => {

that.isFull = !that.isFull;

});

document.addEventListener("msfullscreenchange", () => {

that.isFull = !that.isFull;

});

},