本文主要介绍了vue中实现全屏以及对退出全屏的监听，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：
vue中实现默认进来页面，某个div全屏，并监听退出全屏的次数，当退出全屏次数达到5的时候跳转到别的页面。
实现步骤：
1、页面上在你想要的容器上加上id = ‘con_lf_top_div’，再给他加个动态class名，加上提示和点击进入全屏按钮
<p style="color:red">*温馨提示：请在全屏下进行考试，退出全屏5次以后将禁止考试</p>全屏 ...其他内容
2、css部分，全屏后的部分需要单独加样式
.isScreen{ height:100vh!important; overflow-y: auto; }
3、js部分
data:
fullscreen:false,//是否全屏 goCount:0 //退出第几次
mounted初始化调用
mounted() { this.initScreen() }
methods定义方法：
//初始化全屏方法 initScreen(){ this.goCount = 0 this.screen() //打开全屏 window.addEventListener('keydown', function(event) { //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏 const e = event || window.event if (e && e.keyCode === 122) { e.preventDefault() } }) document.addEventListener('fullscreenchange', v => { if(this.fullscreen == true){ this.fullscreen = false }else{ this.goCount++ // this.$message.info('当前是退出第'+this.goCount+'次') console.log('当前是退出第'+this.goCount+'次') this.fullscreen = true if(this.goCount == 5){ this.goBack() } } }) },
完整源码：
1、页面： <p style="color:red">*温馨提示：请在全屏下进行考试，退出全屏5次以后将禁止考试</p>全屏 ... 2、data: fullscreen:false,//是否全屏 goCount:0 //退出第几次 3、mounted: this.initScreen() 4、methods: //初始化全屏方法 initScreen(){ this.goCount = 0 this.screen() //打开全屏 window.addEventListener('keydown', function(event) { //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏 const e = event || window.event if (e && e.keyCode === 122) { e.preventDefault() } }) document.addEventListener('fullscreenchange', v => { if(this.fullscreen == true){ this.fullscreen = false }else{ this.goCount++ // 注意这里的事件都会触发两次 console.log('当前是退出第'+this.goCount+'次') this.fullscreen = true if(this.goCount == 5){ this.goBack() } } }) }, //全屏方法 screen(){ //设置后就是id==con_lf_top_div 的容器全屏 let element = document.getElementById('con_lf_top_div'); if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFu<div style="color:transparent">本文来源gaodai^.ma#com搞#代!码网</div>llscreen) { document.msExitFullscreen(); } } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } } this.fullscreen = !this.fullscreen; }, //退出全屏方法 goBack(){ //111111111111111111111111111111111111111 this.$message.error('您已退出全屏5次，当前考试已经结束') this.$router.go(-1) },
更多资料：
https://blog.gaodaimna/qq_41619796/article/details/104751814
https://blog.gaodaimna/wangsiyisiyi/article/details/117086453
以上就是vue中实现全屏以及对退出全屏的监听的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue中实现全屏以及对退出全屏的监听
转载请注明原文链接：vue中实现全屏以及对退出全屏的监听
