全屏

vue如何监听F11和手动的全屏、退出全屏事件

全屏按钮、F11、Esc有冲突，用插件screenfull解决

npm

踩坑点：不要安装最新版本，安装5.0.2即可

npm install screenfull@5.0.2 --no-fund

.vue

<span class="fullScreen" :title="titleTip">
    <img @click="isScreenFull" v-if="!isFullscreen" src="~@/assets/images/home-FullScreen.png" />
    <img @click="isScreenFull" v-else src="~@/assets/images/outFullScreen.png" />
</span>

.scss

// 全屏按钮
.fullScreen {
    position: absolute;
    top     : 21px;
    right   : 50px;
    width   : 24px;
    height  : 24px;
    cursor  : pointer;
    display : flex;

    img {
        height: 100%;
        width : 100%;
    }
}

引入

<script>
import screenfull from 'screenfull';

data

data() {
  return {
    isFullscreen: false,
    };
},

mounted

mounted() {
  this.screenFull();	//调用监听事件
},

methods

监听Esc事件

// 监听Esc事件；
screenFull() {
  window.addEventListener("keydown", this.KeyDown, true); 
  // 这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFull
  document.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;
  });
},

监听浏览器F11

// 监听浏览器F11
KeyDown(event) {
  if (event.keyCode === 122) {
    event.returnValue = false;
    this.isScreenFull(); // 触发全屏的方法
  }
},

全屏方法

// 全屏方法
isScreenFull() {
  if (!screenfull.enabled) {
    return false;
  }
  screenfull.toggle(); // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
},

注意：原网址写的是 if (!screenfull.isEnabled) {

log输出没有isEnabled这个属性，只有enabled。