vue 实现点击全屏和退出全屏

mounted() {
    // 监听窗口大小改变，this.isScreenFull的值为是否全屏，若是则true，反之false
      window.onresize = () => {
        this.isScreenFull = document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement
      }
  },
methods: {
  // 进入全屏
    fullScreenHandle(){
      var element = document.documentElement
      if(element.webkitRequestFullscreen){
        element.webkitRequestFullscreen()
      }else if(element.msRequestFullscreen){
        element.msRequestFullscreen()
      }else if(element.mozRequestFullscreen){
        element.mozRequestFullscreen()
      }else if(element.requestFullscreen){
        element.requestFullscreen()
      }
    },
// 退出全屏
    exitFullscreenHandle(){
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
  },