vue瀏覽器全屏實現

一、項目中使用的是sreenfull插件，執行命令安裝

npm install --save screenfull

二、安裝好後，引入項目，用一個按鈕進行控制便可，按鈕方法以下：

toggleFullscreen() {
    if (!screenfull.enabled) {
      this.$message({
        message: 'you browser can not work',
        type: 'warning'
      })
      return false
    }
    screenfull.toggle()
}

試了一下能夠全屏，我用的chrome，IE9如下不要考慮

三、第一步完成以後就是怎麼監聽到全屏的變化，由於若是是經過Esc鍵退出全屏，此時是沒辦法監聽到的。通過一番查找，解決辦法以下：

<script>
import screenfull from 'screenfull'
export default {
  data () {
      return {
        isFullscreen: false
      }
   }，
  methods: {
    /**
     * 全屏事件
     */
    screenfull() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'Your browser does not work',
          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 = () => {
            // 全屏下監控是否按鍵了ESC
            if (!this.checkFull()) {
              // 全屏下按鍵esc後要執行的動做
              this.isFullscreen = false
            }
          }
       }
}
</script>