vue使用screenfull插件，Esc退出，F11切换，图标切换问题；

项目要求Esc，F11切换，图标都得跟着变换；我根据百度下好几个大佬方法合并了以下代码；

这里是项目用的html

<div class="screenfull" @click="isScreenFull"><img v-if="!isFullscreen" src="img/icon/screenfull.png" alt="" /><img v-if="isFullscreen"  src="img/icon/screenfull-close.png" alt=""/>
</div>

  mounted() {//调用监听事件this.screenFull();},methods:{//监听Esc事件；screenFull() {//监听f11事件window.addEventListener("keydown", this.KeyDown, true); //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFulldocument.addEventListener("fullscreenchange", () => {this.isFullscreen = !this.isFullscreen;//你要切换得图标使用得属性});document.addEventListener("mozfullscreenchange", () => {this.isFullscreen = !this.isFullscreen;});document.addEventListener("webkitfullscreenchange", () => {this.isFullscreen = !this.isFullscreen;});document.addEventListener("msfullscreenchange", () => {this.isFullscreen = !this.isFullscreen;});},KeyDown(event) {if (event.keyCode === 122) {event.returnValue = false;this.isScreenFull(); //触发全屏的方法}},//全屏方法isScreenFull() {if (!screenfull.isEnabled) {return false;}screenfull.toggle();},}

vue使用screenfull插件，Esc退出，F11切换，图标切换问题；相关推荐

使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改)
成品源码: https://download.csdn.net/download/weixin_42960873/13130175 方法一: 基础源码下载 https://github.com/ele ...
esc键退出全屏 vue_vue项目实现全屏,退出全屏，图标切换的解决方案
vue项目实现全屏,退出全屏,图标切换的解决方案 vue项目点击按钮实现全屏很容易,点击按钮退出全屏也很容易. fullScreen(){ var element=document.documentE ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
前端vue实现全屏和按esc退出全屏功能
效果如下: 不多说,直接上代码如下,复制即可使用,注意图片位置修改即可: 1.vue页面中根据是否全屏判断当前显示图片或icon图标,isFullScren为true时表示全屏,默认值为false,并 ...
vue自写全屏/退出全屏组件
页面代码 isFullscreen主要是判断当前是否为全屏状态,然后展示不同的文字和svg图标组件传入的值为当前需要全屏的模块div的id名 vue data中定义是否全屏的值,默认为false i ...
Vue（Vuex插件）
一.Vuex的介绍 1. 概念专门在Vue中实现集中式状态数据管理的一个Vue插件,对Vue的应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. ...
vue连线插件_一起写一个即插即用的 Vue Loading 插件
写在之前实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...
vscode terminal点击i编辑，esc退出编辑无效
命令行运行环境:windows+ConEmu+ubuntu+on-my-zsh 问题:执行git rebase -i xxx ,terminal点击i进行编辑,按esc退出编辑无效,按下方的命令也无效 ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...

vue使用screenfull插件，Esc退出，F11切换，图标切换问题；

项目要求Esc，F11切换，图标都得跟着变换；我根据百度下好几个大佬方法合并了以下代码；

vue使用screenfull插件，Esc退出，F11切换，图标切换问题；相关推荐

最新文章

热门文章