页面全屏显示

样式

<div class="fullScreen">
          <el-tooltip
            class="item"
            effect="dark"
            :content="isFullScreen ? '退出全屏' : '进入全屏'"
            placement="top"
          >
            <i
              class="el-icon-full-screen"
              @click="fullScreen"
              v-if="!isFullScreen"
            ></i>
            <i class="el-icon-crop" @click="exitFullscreen" v-else></i>
          </el-tooltip>
</div >

实现

 fullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
      this.isFullScreen = true;
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
      this.isFullScreen = false;
    },