vue实现进入全屏和退出全屏的示例代码
作者：Zwq8023520
最近一个项目需要进行大屏展示,所以登录完就要处于一个全屏的状态,本文主要介绍了vue实现进入全屏和退出全屏的示例代码,具有一定的参考价值,感兴趣的可以了解一下
最近一个项目需要进行大屏展示，所以登录完就要处于一个全屏的状态，当切换到控制台之后就可以退出全屏。在登录之后调用enterFullscreen方法，就可以进入全屏。在点击切换到控制台时，可以调用exitFullscreen方法。
enterFullscreen() {
const element = document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
},exitFullscreen() {
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
},到此这篇关于vue实现进入全屏和退出全屏的示例代码的文章就介绍到这了,更多相关vue 进入全屏和退出全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！