//进入全屏
launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
},
//退出全屏
exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
},
//全屏按钮,点击屏幕上的按钮触发的事件
fullScreen() {
this.isfullScreen = !this.isfullScreen;
if (this.isfullScreen) {
this.launchFullscreen(document.documentElement);
} else {
this.exitFullscreen();
}
},
--------------------------------------------------------------------------------------------------
上述是实习的时候在网上找的方法
尚硅谷Vue3项目的方案如下:
都是dom原生的方法,但是注意可能会有兼容性风险
市面上很多插件也可以实现全屏
//全屏按钮点击的回调
const fullScreen = () => {
//DOM对象的一个属性:可以用来判断当前是不是全屏模式[全屏:true,不是全屏:false]
let full = document.fullscreenElement;
//切换为全屏模式
if (!full) {
//文档根节点的方法requestFullscreen,实现全屏模式
document.documentElement.requestFullscreen();
} else {
//变为不是全屏模式->退出全屏模式
document.exitFullscreen();
}
}