浏览器全屏，按下两次esc方法的解决思路

浏览器全屏之后添加键盘事件，当再次按下esc取消全屏时候我们会发现第一次的键盘事件是不触发的，解决思路如下。

首先安装依赖，命令行输入

npm install screenfull

然后引入

import screenfull from "screenfull";

模板中写入

<template><div><button @click="but">全屏</button><!-- <div class="animation">哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> --><button @click="kaiqi">开启关闭</button></div>
</template><script>
import screenfull from "screenfull";
import { ref, onMounted, reactive } from "vue";
export default {setup() {const isFullscreen = ref(false);const but = () => {screenfull.toggle();};const change = () => {isFullscreen.value = screenfull.isFullscreen;// console.log(isFullscreen.value);if (isFullscreen.value == true) {console.log("打开全屏");} else if (isFullscreen.value == false) {console.log("关闭全屏");}};onMounted(() => {screenfull.on("change", change);console.log(isFullscreen.value);});const isanimation = reactive({animation: false,});const kaiqi = () => {isanimation.animation = !isanimation.animation;};return {isanimation,kaiqi,change,isFullscreen,but,};},
};
</script>

浏览器全屏，按下两次esc方法的解决思路相关推荐

浏览器全屏状态下背景颜色设置
浏览器全屏状态下背景颜色设置: :-webkit-full-screen { background-color: @content-bg !important; } :-moz-full-screen ...
esc键退出全屏 vue_vue中实现浏览器全屏与退出全屏功能
在标签中主要是放一个全屏与退出全屏的按钮,并绑定上点击事件 fullScreenClick .全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的. :content="f ...
esc键退出全屏 vue_解决了VUE在浏览器全屏下监听不到Esc键盘事件
说明: 实测可以在谷歌.火狐.360 浏览器使用解决了在浏览器全屏下监听不到键盘Esc事件解决了取消全屏和全屏的同步问题,ESC按键下可以同步以下是完整的代码, // data() { retu ...
解决VUE在浏览器全屏下监听不到Esc键盘事件
实测可以在谷歌.火狐.360 浏览器使用解决了在浏览器全屏下监听不到键盘Esc事件解决了取消全屏和全屏的同步问题,ESC按键下可以同步以下是完整的代码, // data() {return {i ...
前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）
vue项目项目分为顶部导航.侧边导航.以及右边mainContent区域需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏实现: 1.在state里定义一个全局 ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
js控制浏览器全屏踩坑记录
需求点击以下按钮后,页面进入全屏. 进入全屏后,按钮样式改变为恢复非全屏时,按钮自动恢复. 难点需求很简单,但是实际上手发现有几个难点: 1.浏览器在全屏状态下按F11和Esc可以退出全屏,且全 ...
html5ppt预览插件,jQuery高性能跨浏览器全屏幻灯片特效插件
Nex是一款效果炫酷的.高性能的跨浏览器全屏幻灯片特效jQuery插件.该幻灯片插件允许你嵌入图片.视频,甚至是谷歌地图.该幻灯片提供了7组共34种不同的效果,可以使你适用于任何场景下使用.它的特点有 ...
Html5 Api 实现浏览器全屏
一.全屏方法和事件 1.全屏显示 function fullScreen(toFullScreenElement) { var docElm =toFullSc ...

浏览器全屏，按下两次esc方法的解决思路

浏览器全屏，按下两次esc方法的解决思路相关推荐

最新文章

热门文章