VUE 全屏页面

VUE 全屏页面

1、点击全屏按钮进入全屏模式

<img src="../../../assets/image/fullscreen_icon.png" class="full_icon" @click="rtPush">

  rtPush(){
      console.log("this.$route", this.$route);
      this.$router.push({path:this.$route.path})
      
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }

2、初次加载进入全屏模式

  created() {
  //初次加载进入全屏模式.
    setTimeout(()=>{
      if(this.$route.name=='datacenter'){
        this.launchIntoFullscreen(document.documentElement);
      }
    },0)
    //全屏事件监听
    document.addEventListener("fullscreenchange", this.fullscreenchangeFunc, false);
  }
  methods:{
    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();
      }
    },
    exitFullscreen() {
      if(document.exitFullscreen) {
        document.exitFullscreen();
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    fullscreenchangeFunc(){
      let isFull = document.fullscreenElement ||document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      if(!isFull){
        this.$router.push({path:'/home'})
      }
    },
  }
  beforeDestroy() {
    //移除事件监听
    document.removeEventListener("fullscreenchange", this.fullscreenchangeFunc);
  },