浏览器全屏事件，以及解决元素全屏后element-ui组件不显示

最近遇到了一个问题，当设置了指定元素全屏后，element-ui的弹窗元素不显示了，设置z-index也失效，话不多说，先上解决方案：

以el-dialog为例子

1. 需要将弹窗的dom放置在全屏dom容器内
2. 设置el-dialog不插入body中

    <el-dialog
      :modal-append-to-body="false"
      :append-to-body="false"
    >

原因就在于指定了特定 DOM 元素去 requestFullscreen，而不是body,所以插入body的元素都不会被显示。

附上浏览器指定元素全屏解决方案

     <!-- 指定要全屏的元素-->
     <div @click="fullScreen">全屏</div>
     <div class="screen-box" ref="appRef"></div>

    mounted() {
        // 监听浏览器全屏事件
        let that = this;
        document.addEventListener("fullscreenchange", function () {
          that.getFullScreenStatus();
        });
        document.addEventListener("mozfullscreenchange", function () {
          that.getFullScreenStatus();
        });
        document.addEventListener("webkitfullscreenchange", function () {
          that.getFullScreenStatus();
        });
        document.addEventListener("msfullscreenchange", function () {
          that.getFullScreenStatus();
        });
   },
    methods：{
        // 判断当前页面是否全屏
        getFullScreenStatus() {
          this.ifFullScreen = !!(
            document.fullscreen ||
            document.mozFullScreen ||
            document.webkitIsFullScreen ||
            document.webkitFullScreen ||
            document.msFullScreen
          );
          console.log(this.ifFullScreen);
        },
        //全屏或退出全屏，
        fullScreen(status) {
          let box = this.$refs.appRef;
          if (status) {
            let el = element || document.documentElement// document.documentElement
            //浏览器兼容
            let cfs =
              el.cancelFullScreen ||
              el.mozCancelFullScreen ||
              el.msExitFullscreen ||
              el.webkitExitFullscreen ||
              el.exitFullscreen;
            if (cfs) {
              cfs.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") {
              let wscript = new ActiveXObject("WScript.Shell");
              if (wscript != null) {
                wscript.SendKeys("{F11}");
              }
            }
          } else {
            if (box.requestFullscreen) {
              box.requestFullscreen();
            }
            if (box.webkitRequestFullscreen) {
              box.webkitRequestFullscreen(
                () => {
                  console.log("success");
                },
                () => {
                  console.log("error");
                }
              );
            }
          }
        },
    }