vue全屏，退出全屏

<template>
    <div class="Quanping">
        <el-button style="position: absolute;top: 0%;right: 0%;" v-if="!fullscreen" @click="fullScreen()">全屏</el-button>
        <el-button style="position: absolute;top: 0%;right: 0%;"  v-else @click="exitFullscreen()">退出全屏</el-button>
     </div>
</template>

<script>
export default {
  data()
  {
    return {
        fullscreen: false //全屏显示true
      }
  },
  created()
  {
    let that = this
    window.onresize = function()
    {
      if (!that.checkFull())
      {
        // 退出全屏后要执行的动作
        that.exitFullscreen()
      }
    }
  },
  mounted()
  {

  },
  methods: {
    fullScreen()
    {
      //全屏
      var full = document.getElementById('AllStatistics')
      this.launchIntoFullscreen(full)
      this.fullscreen = true
    },
    //退出全屏封装
    exitFullscreen()
    {
      if (document.exitFullscreen)
        document.exitFullscreen()
      else if (document.mozCancelFullScreen)
        document.mozCancelFullScreen()
      else if (document.webkitExitFullscreen)
        document.webkitExitFullscreen()
      this.fullscreen = false
    },
    //全屏封装
    launchIntoFullscreen(element)
      {
        if (element.requestFullscreen)
          element.requestFullscreen()
        else if (element.mozRequestFullScreen)
          element.mozRequestFullScreen()
        else if (element.webkitRequestFullscreen)
          element.webkitRequestFullscreen()
        else if (element.msRequestFullscreen)
          element.msRequestFullscreen()
      },
    checkFull()
      {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器//谷歌浏览器及Webkit内核浏览器
        var isFull = document.mozFullScreen || document.fullScreen || document.webkitIsFullScreen || document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled
        if (isFull === undefined)
          isFull = false
        return isFull
      }
  }
}
</script>