vue监听页面关闭,vue监听窗口关闭
本文主要介绍了某视频剪辑软件中实现全屏以及对退出全屏的监听，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
前言：实现步骤：完整源码：更多资料：
前言：
某视频剪辑软件中实现默认进来页面，某个差异全屏，并监听退出全屏的次数，当退出全屏次数达到5的时候跳转到别的页面。
实现步骤：
1、页面上在你想要的容器上加上id=con_lf_top_div ，再给他加个动态班级名，加上提示和点击进入全屏按钮
模板
电子贺卡
影子=永远不会
正在检查
v型装载。全屏。lock= loading
id=con_lf_top_div
:class={isScreen :全屏}
p style= color:red；*温馨提示：请在全屏下进行考试，退出全屏5次以后将禁止考试/p
El-button v-if=全屏 @ click= screen()；screen() style= position:absolute；top:0px；右：0;全屏/el-button
.其他内容
2、css部分，全屏后的部分需要单独加样式。屏幕
身高：100vh！重要；
溢出-y:自动；
}
3、js部分
数据：
全屏：false，//是否全屏
goCount:0 //退出第几次
安装好的初始化调用
已安装(){
this.initScreen()
}
方法定义方法：
//初始化全屏方法
initScreen(){
this.goCount=0
this.screen() //打开全屏
窗户。addevent侦听器( keydown ，函数(事件){
//禁掉F11的全屏的默认事件，不会禁止F11的退出全屏
const e=event window.event
if(e . e . keycode===122){
预防默认()
}
})
文档。addevent侦听器(“全屏更改”，v={
if(this.fullscreen==true){
这个。全屏=假
}否则{
this.goCount
//这个 message.info(当前是退出第 this.goCount 次)
console.log(当前是退出第 this.goCount 次)
this.fullscreen=true
if(this.goCount==5){
this.goBack()
}
}
})
},
完整源码：
1、页面：
电子贺卡
id=con_lf_top_div
:class={isScreen :全屏}
p style= color:red；*温馨提示：请在全屏下进行考试，退出全屏5次以后将禁止考试/p
El-button v-if=全屏 @ click= screen()；screen() style= position:absolute；top:0px；右：0;全屏/el-button
.
2、数据：
全屏：false，//是否全屏
goCount:0 //退出第几次
3、安装：
this.initScreen()
4、方法：
//初始化全屏方法
initScreen(){
this.goCount=0
this.screen() //打开全屏
窗户。addevent侦听器( keydown ，函数(事件){
//禁掉F11的全屏的默认事件，不会禁止F11的退出全屏
const e=event window.event
if(e . e . keycode===122){
预防默认()
}
})
文档。addevent侦听器(“全屏更改”，v={
if(this.fullscreen==true){
this.fullscreen=false
}否则{
this.goCount
//注意这里的事件都会触发两次
console.log(当前是退出第 this.goCount 次)
this.fullscreen=true
if(this.goCount==5){
this.goBack()
}
}
})
},
//全屏方法
screen(){
//设置后就是id==con_lf_top_div的容器全屏
让元素=文档。getelementbyid( con _ lf _ top _ div )；
如果(this .全屏){
if (document.exitFullscreen) {
文档。退出全屏()；
} else if(文档。WebKit取消全屏){
文档。webkitcancelfullscreen()；
} else if(文档。mozzcancelfull screen){
文档。mozcancelfullscreen()；
} else if(文档。msexit全屏){
文档。msexifullscreen()；
}
}否则{
if (element.requestFullscreen) {
元素。请求全屏()；
} else if(元素。webkitrequestfullsscreen){
元素。webkitrequestfullscreen()；
} else if(元素。mozrequestfullscreet){
元素。mozrequestfullscreen()；
} else if(元素。msrequestfullsscreen){
//IE11
元素。msrequestfullscreen()；
}
}
this.fullscreen=！这个。全屏；
},
//退出全屏方法
goBack(){
//111111111111111111111111111111111111111
这个message.error(您已退出全屏5次，当前考试已经结束)
这个. router.go(-1)
},
更多资料：
https://blog.csdn.net/qq_41619796/article/details/104751814
https://blog.csdn.net/wangsiyisiyi/article/details/117086453
到此这篇关于某视频剪辑软件中实现全屏以及对退出全屏的监听的文章就介绍到这了，更多相关某视频剪辑软件中实现全屏以及对退出全屏的监听内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。