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>