element中全屏展示+bug的解决

说明 ：

全屏展示在IE浏览器下对页面整体样式是有要求的

 #app {

    position: fixed;

    top: 0%;

    left: 0%;

    height: 100%;

    width: 100%;

    overflow: hidden;

  }

此处绝不可为position: absolute;

<!-- 全屏显示 -->
          <div class="btn-fullscreen" @click="handleFullScreen">
            <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
              <i class="el-icon-rank"></i>
            </el-tooltip>
          </div>

fullscreen: false,

// 全屏事件
      handleFullScreen() {
        let element = document.documentElement; //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;
      }

拿走不谢~