vue全屏切换

最新推荐文章于 2025-03-11 17:25:56 发布

liuwenmin_123

最新推荐文章于 2025-03-11 17:25:56 发布

阅读量634

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/liuwenmin_123/article/details/126402687

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

mounted() {
// 监听窗口大小改变，this.isScreenFull的值为是否全屏，若是则true，反之false
window.onresize = () => {
this.isScreenFull = document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement
}
},
methods: {
// 进入全屏
fullScreenHandle(){
var element = document.documentElement
if(element.webkitRequestFullscreen){
element.webkitRequestFullscreen()
}else if(element.msRequestFullscreen){
element.msRequestFullscreen()
}else if(element.mozRequestFullscreen){
element.mozRequestFullscreen()
}else if(element.requestFullscreen){
element.requestFullscreen()
}
},
// 退出全屏
exitFullscreenHandle(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
},