vue中实现全屏以及对退出全屏的监听
admin
2023-05-02 19:00:10
目录
前言：
vue中实现默认进来页面，某个p全屏，并监听退出全屏的次数，当退出全屏次数达到5的时候跳转到别的页面。
实现步骤：
1、页面上在你想要的容器上加上id = ‘con_lf_top_p'，再给他加个动态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 = 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、页面：*温馨提示：请在全屏下进行考试，退出全屏5次以后将禁止考试
全屏 ... 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_p 的容器全屏 let element = document.getElementById('con_lf_top_p'); 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) { // IE11 element.msRequestFullscreen(); } } this.fullscreen = !this.fullscreen; }, //退出全屏方法 goBack(){ //111111111111111111111111111111111111111 this.$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中实现全屏以及对退出全屏的监听内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧！
相关内容
热门资讯
世界上最漂亮的人 世界上最漂亮...
此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...
苗族的传统节日 贵州苗族节日有...
【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景...
北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...
长白山自助游攻略 吉林长白山游...
昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...
应用未安装解决办法 平板应用未...
---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...