元素设置全屏
Element.requestFullscreen()
方法用于发出异步请求使元素进入全屏模式。
元素退出全屏
Document.exitFullscreen() 方法用于让当前文档退出全屏模式
(上一个调用requestFullscreen()方法的退出全屏)
vue 项目中应用
//data
fullScreenVisible
//methods
fullScreen() {
this.fullScreenVisible = true;
let element = document.querySelector(".editor-wraper"); // 指定全屏区域元素
element.requestFullscreen();
document.querySelector(".mode_editor").style.display = "none";
// fullscreenchange 事件当浏览器进入或离开全屏时触发
document.addEventListener("fullscreenchange", (e) => {
if (document.fullscreenElement == null) {
this.closeFullScreen();
}
});
},
// 退出全屏
closeFullScreen() {
this.fullScreenVisible = false;
if (document.fullscreenElement !== null) {
document.exitFullscreen();
document.querySelector(".mode_editor").style.display = "block";
}
},