esc键退出全屏 vue_vue中的全屏事件，按esc退出全屏

1、vue页面中根据是否全屏判断当前显示icon图标，isFull为true时表示全屏，默认值为false，并绑定click事件

2、click全屏事件

fullScreenEvent: function() {

let el = document.documentElement;

if (this.isFull) {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

} else {

if (el.requestFullscreen) {

el.requestFullscreen();

} else if (el.mozRequestFullScreen) {

el.mozRequestFullScreen();

} else if (el.webkitRequestFullScreen) {

el.webkitRequestFullScreen();

} else if (el.msRequestFullscreen) {

el.msRequestFullscreen();

}

3、页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发

mounted() {

let isFullscreen =

document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement ||

document.fullScreen ||

document.mozFullScreen ||

document.webkitIsFullScreen;

isFullscreen = !!isFullscreen;

let that = this;

document.addEventListener("fullscreenchange", () => {

that.isFull = !that.isFull;

});

document.addEventListener("mozfullscreenchange", () => {

that.isFull = !that.isFull;

});

document.addEventListener("webkitfullscreenchange", () => {

that.isFull = !that.isFull;

});

document.addEventListener("msfullscreenchange", () => {

that.isFull = !that.isFull;

});

esc键退出全屏 vue_vue中的全屏事件，按esc退出全屏相关推荐

esc键退出全屏 vue_vue中实现浏览器全屏与退出全屏功能
在标签中主要是放一个全屏与退出全屏的按钮,并绑定上点击事件 fullScreenClick .全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的. :content="f ...
jquery中DOM加载事件，onload事件和ready事件
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery中DOM加载事件 jquery中的DOM加载事件分为onload事件和ready事件.,具体功能如代码中注释. 代 ...
esc键退出全屏 vue_vue项目实现全屏,退出全屏，图标切换的解决方案
vue项目实现全屏,退出全屏,图标切换的解决方案 vue项目点击按钮实现全屏很容易,点击按钮退出全屏也很容易. fullScreen(){ var element=document.documentE ...
esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...
esc键退出全屏 vue_解决了VUE在浏览器全屏下监听不到Esc键盘事件
说明: 实测可以在谷歌.火狐.360 浏览器使用解决了在浏览器全屏下监听不到键盘Esc事件解决了取消全屏和全屏的同步问题,ESC按键下可以同步以下是完整的代码, // data() { retu ...
全屏状态下的ESC键监听处理
我又来分享好东西了直奔主题今天分享的内容是页面的全屏功能(同时跳转页面) 这个的关键就是当全屏以后,我想通过按下esc键,同时进行一些处理,比如:当手动全屏的时候我跳转展示第三方的页面文件,取消全 ...
React 全屏监听Esc键
全屏与退出全屏 if (isFull) {document.exitFullscreen();} else {tree.current.requestFullscreen();tree.current ...
esc键 qt 退出菜单_Qt中Esc键触发事件处理
有一段时间没有使用Qt开发,最近给公司写的小DEMO中,用到了Qt编写的界面,其中有几处用到Event处理,在编写对Esc键处理的过程中,发现closeEvent无效,最终发现了两种解决办法. 1.重 ...
vue实现全屏只显示内容不显示导航条和退出全屏调用事件
啊萨达一.需求尝试分析二.实现内容全屏(导航条不显示) 1.页面全屏 2.部分元素全屏 3.退出全屏调用事件一.需求尝试分析先说一下需求:要求在第一个页面点击全屏按钮进入全屏或者第二个新的页面 ...

esc键退出全屏 vue_vue中的全屏事件，按esc退出全屏

esc键退出全屏 vue_vue中的全屏事件，按esc退出全屏相关推荐

最新文章

热门文章