vue中用js判斷頁面是否全屏

 我當前的項目要求支持IE10/IE11即可，其他瀏覽器edge、火狐、谷歌要求較新版本都要支持。

在網上看了許多例子，我的思路：

（1）使用screenfull來解決全屏操作

（2）利用監聽事件，禁用F11操作的全屏，只有由頁面“全屏”按鈕才能出發全屏；

（3）利用監聽事件，來改變isFullscreen的值，進而控制頁面展示“全屏”圖標，還是“退出全屏”圖標 

1、安裝使用screenfull.js

npm install --save screenfull

2、在相應的組件引入screenful，我的js部分的代碼如下：

<script>
import screenfull from 'screenfull'

export default {
  data() {
    return {
      isFullscreen: false // false非全屏狀態、true全屏狀態
    }
  },
  created() {
    // 監聽事件
    window.addEventListener('resize', this.onresize)
    window.addEventListener('keydown', this.keydown)
  },
  beforeDestroy() {
    // 取消監聽事件
    window.removeEventListener('resize', this.onresize)
    window.removeEventListener('keydown', this.keydown)
  },

  methods: {
    // 切換是否全屏
    toggleFullscreen(isFscreen) {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.isFullscreen = isFscreen
    },

    // 阻止F11默認事件
    keydown(event) {
      if (event.keyCode === 122) {
        event.preventDefault()
        event.returnValue = false
      }
    },

    /**
     * 響應屏幕變化事件，給isFullscreen賦值，標識是否全屏
     * IE中bug: 調試器打開，且與頁面不分離時 -- 無效
     * **/
    onresize(event) {
      // 利用屏幕分辨率和window對象的內高度來判斷兼容IE
      let winFlag = window.innerHeight === window.screen.height
      // 利用window全屏標識來判斷 -- IE無效
      let isFull = window.fullScreen || document.webkitIsFullScreen

      if (isFull === undefined) {
        this.isFullscreen = winFlag
      } else {
        this.isFullscreen = winFlag || isFull
      }
      console.log('winFlag || isFull', winFlag, isFull)
    }
  }
}
</script>