vue中实现全屏以及对退出全屏的监听
目录
- 前言:
- 实现步骤:
- 完整源码:
- 更多资料:
前言: vue中实现默认进来页面,某个div全屏,并监听退出全屏的次数,当退出全屏次数达到5的时候跳转到别的页面。
实现步骤: 1、页面上在你想要的容器上加上id = ‘con_lf_top_div',再给他加个动态class名,加上提示和点击进入全屏按钮
文章图片
*温馨提示:请在全屏下进行考试,退出全屏5次以后将禁止考试
全屏 ...其他内容
2、css部分,全屏后的部分需要单独加样式
.isScreen{height:100vh!important; overflow-y: auto; }
3、js部分
data:
fullscreen:false,//是否全屏goCount:0 //退出第几次
mounted初始化调用
mounted() {this.initScreen()}
methods定义方法:
文章图片
//初始化全屏方法initScreen(){this.goCount = 0this.screen() //打开全屏window.addEventListener('keydown', function(event) {//禁掉F11的全屏的默认事件,不会禁止F11的退出全屏const e = event || window.eventif (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 = trueif(this.goCount == 5){this.goBack()}}})},
文章图片
文章图片
【vue中实现全屏以及对退出全屏的监听】
完整源码:
1、页面:*温馨提示:请在全屏下进行考试,退出全屏5次以后将禁止考试
全屏 ... 2、data:fullscreen:false,//是否全屏goCount:0 //退出第几次 3、mounted:this.initScreen() 4、methods: //初始化全屏方法initScreen(){this.goCount = 0this.screen() //打开全屏window.addEventListener('keydown', function(event) {//禁掉F11的全屏的默认事件,不会禁止F11的退出全屏const e = event || window.eventif (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 = trueif(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.msExitFullscreen) {document.msExitFullscreen(); } } else {if (element.requestFullscreen) {element.requestFullscreen(); } else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) {element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) {// IE11element.msRequestFullscreen(); }}this.fullscreen = !this.fullscreen; },//退出全屏方法goBack(){//111111111111111111111111111111111111111this.$message.error('您已退出全屏5次,当前考试已经结束')this.$router.go(-1)},
更多资料: https://blog.csdn.net/qq_41619796/article/details/104751814
https://blog.csdn.net/wangsiyisiyi/article/details/117086453
到此这篇关于vue中实现全屏以及对退出全屏的监听的文章就介绍到这了,更多相关vue中实现全屏以及对退出全屏的监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募