data() {
return { msg: [], fullscreen: false, //全屏,fasle默认不是全屏,true为全屏 }
},methods: {
//浏览器进入全屏
enterScreen(){ let element = document.getElementById('con_lf_top_div'); //设置后就是 id==con_lf_top_div 的容器全屏 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 = true },
//浏览器退出全屏
exitScreen(){ if(this.fullscreen){ if (document.exitFullscreen||document.documentElement.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } },}
mounted() {
this.$api.get(this.$path.INDEX_BANNER).then(res => { this.msg = res.data.data }).catch(err => { }) //监听用户切屏 let num = 0 let _this = this window.onblur = function() { document.title = "请继续考试"; num++ console.log(num) } window.onfocus = function() { document.title = "正在考试中,请勿离开"; if (num === 1 || num === 2) { _this.$message.info("已离开当前页面" + num + "次,离开三次将强制交卷") } if (num > 2) { _this.exitScreen() //退出全屏 _this.$alert('由于您离开次数过多,将强制交卷', '提示', { showClose: false, confirmButtonText: '我要交卷', callback: action => { _this.$message.success("交卷成功!") } }); } } },
destroyed() {
document.removeEventListener('visibilitychange', () => { console.log("销毁页面隐藏") })
}
vue 浏览器进入全屏退出全屏及监听用户切屏操作
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...