<template>
  <div class="app-container" ref="apps">
    <el-button @click="handleFullscreen">test</el-button>
  </div>
</template>

isFullScreen() {
      return !!(
        document.fullscreen ||
        document.mozRequestFullScreen ||
        document.webkitRequestFullscreen ||
        document.msRequestFullscreen ||
        document.fullscreenElement
      );
    },
    handleFullscreen() {
      this.fullscreen = !this.isFullScreen();
      if (this.fullscreen) {
        this.launchIntoFullscreen();
      } else {
        this.exitFullscreen();
      }
    },
    launchIntoFullscreen() {
      // 全屏
      const element = this.$refs["apps"];
      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();
      }
    },