浏览器全屏之后添加键盘事件,当再次按下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方法的解决思路相关推荐

  1. 浏览器全屏状态下背景颜色设置

    浏览器全屏状态下背景颜色设置: :-webkit-full-screen { background-color: @content-bg !important; } :-moz-full-screen ...

  2. esc键退出全屏 vue_vue中实现浏览器全屏与退出全屏功能

    在 标签中主要是放一个全屏与退出全屏的按钮,并绑定上点击事件 fullScreenClick .全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的. :content="f ...

  3. esc键退出全屏 vue_解决了VUE在浏览器全屏下监听不到Esc键盘事件

    说明: 实测可以在谷歌.火狐.360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题,ESC按键下可以同步 以下是完整的代码, // data() { retu ...

  4. 解决VUE在浏览器全屏下监听不到Esc键盘事件

    实测可以在谷歌.火狐.360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题,ESC按键下可以同步 以下是完整的代码, // data() {return {i ...

  5. 前端js使浏览器窗口全屏与退出----浏览器全屏时 监测通过esc按键退出全屏 (退出全屏时有页面上的相关处理)

    vue项目  项目分为顶部导航.侧边导航.以及右边mainContent区域 需求是  让项目的其中一个页面有全屏功能   并且在全屏时隐藏掉顶部的顶导航栏 实现: 1.在state里  定义一个全局 ...

  6. js实现浏览器全屏与退出全屏,解决chrome下F11进入全屏后退出全屏API方法失效

    1. 问题说明 网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...

  7. js控制浏览器全屏踩坑记录

    需求 点击以下按钮后,页面进入全屏. 进入全屏后,按钮样式改变为 恢复非全屏时,按钮自动恢复. 难点 需求很简单,但是实际上手发现有几个难点: 1.浏览器在全屏状态下按F11和Esc可以退出全屏,且全 ...

  8. html5ppt预览插件,jQuery高性能跨浏览器全屏幻灯片特效插件

    Nex是一款效果炫酷的.高性能的跨浏览器全屏幻灯片特效jQuery插件.该幻灯片插件允许你嵌入图片.视频,甚至是谷歌地图.该幻灯片提供了7组共34种不同的效果,可以使你适用于任何场景下使用.它的特点有 ...

  9. Html5 Api 实现浏览器全屏

    一.全屏方法和事件 1.全屏显示 function fullScreen(toFullScreenElement)         {             var docElm =toFullSc ...

最新文章

  1. jenkins获取远程服务器文件,Jenkins用SSH传输文件到远程服务器
  2. 阿里青橙奖名单公布,23位院士、2位图灵奖得主推荐
  3. ETH网络要爆炸,未来Token的最佳选择注定是BCH
  4. Android之使用Jsoup抓取网络数据
  5. php查询跳转结果页面,登录判断跳转页面
  6. 对IFeatureClass的选择结果进行再次选择及排序
  7. 《大众创业做电商——淘宝与微店 开店 运营 推广 一册通》一一1.3 选择创业的行业...
  8. BZOJ4388 : JOI2012 invitation
  9. 洛谷 一种堆套路 P1631序列合并、P2085最小函数值
  10. 看完就懂webpack打包原理
  11. SIP中第三方呼叫控制(3PCC)建立流程
  12. python标准库os_Python标准库 os
  13. 无法创建 ActiveX 组件(转载)
  14. 天猫要做“大”,京东怕不怕?
  15. 利用pdfbox和itext包将pdf转换为图片
  16. win10 永久关闭自动更新
  17. Dialog加载页面动画(Loding.....加载等待)三种方式
  18. Thor UI - 轻量简洁的免费开源移动端 UI 组件库,支持原生小程序和 uni-app
  19. C# FileSystemWatcher监控新生成的文件
  20. 融云IM商用版冰点促销 助程序员的十二时辰躺赢

热门文章

  1. python 操作excel坐标_python读取并定位excel数据坐标系详解
  2. html清除浮动的几种方式
  3. Praat脚本-036 | Praat脚本批量为音频添加首尾静音段
  4. 能耗监测系统的研究与应用,功能介绍
  5. 【校招VIP】“推推”产品项目课程:产品的规划和商业化分析
  6. JavaFX --- BMI计算器
  7. 武汉城区虚拟形象代言人发布,虚拟数字人引领城市形象代言新趋势
  8. 台式电脑显示无法自动修复此计算机,win7启动修复无法自动修复此计算机问题解决方法汇总...
  9. 18张含金量最高的大数据证书
  10. 谈谈程序员的离职和跳槽