項目中有一個需求：是系統(tǒng)需要全屏，且全屏狀態(tài)下頂部的內(nèi)容和非全屏下的內(nèi)容不一樣。開始干活

1. 項目使用的是vue，需要全屏插件，上網(wǎng)找了一個screenfull.js，安裝上再說

$ npm install --save screenfull

2. 安裝好后，引入項目，試了一下可以全屏，我用的chrome，IE9以下不要考慮，第一步完成
3. 第二布，需要監(jiān)控全屏狀態(tài)，但是試了一下，isFullscreen的狀態(tài)在全屏之后是true，ESC退出全屏之后狀態(tài)沒有改變，于是上網(wǎng)搜了一下。
   瀏覽器故意不上監(jiān)聽ESC鍵的，跟網(wǎng)頁加載完成之后不能用程序使瀏覽器全屏一樣的道理，避免開發(fā)者惡意全屏
   解決辦法：

window.onresize = function(){
    if(!checkFull()){
        //要執(zhí)行的動作
    }
}
function checkFull(){
    var isFull =  document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      //to fix : false || undefined == undefined
    if(isFull === undefined) isFull = false;
        return isFull;
    }

4. ok，知道原因后，加到代碼中，進行onresize監(jiān)聽事件。
   完整代碼如下：

<template>
    <div v-if='!isFullscreen'> 非全屏狀態(tài)</div>
    <div v-if='isFullscreen'> 全屏狀態(tài)</div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  data () {
      return {
        isFullscreen: false
      }
   }，
  methods: {
    /**
     * 全屏事件
     */
    screenfull() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'Your browser does not support!',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle();
      this.isFullscreen = true;
    },
    /**
     * 是否全屏并按鍵ESC鍵的方法
     */
    checkFull() {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
          isFull = false;
      }
      return isFull;
    }
  },
  mounted() {
      window.onresize = () => {
            // 全屏下監(jiān)控是否按鍵了ESC
            if (!this.checkFull()) {
              // 全屏下按鍵esc后要執(zhí)行的動作
              this.isFullscreen = false;
            }
          }
       }
}
</script>