全屏及踩坑

先贴完整代码：

mounted(){
    // 监听Esc键
    window.onresize = ()=>{
        if(!this.checkFull()){
            // 退出全屏后要执行的动作
            this.fullscreen = false
            // 这里是用hooks来通知全屏状态
            hooks.callHook('reloadElement', this.fullscreen);
        }
    }
},
methods:{
    //判断浏览器是否处于全屏状态
    checkFull(){
        //火狐浏览器
        var isFull = document.mozFullScreen||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
        if(isFull === undefined) {
            isFull = false
        }
        return isFull;
    },
    // 全屏事件
    handleFullScreen(){
        // 全屏的坑：
        // 1: 针对某个元素全屏时，下拉框不展示：下拉框是往body里面插入的，全屏的元素盖住了下拉框。解决：给有下拉框的加入:append-to-body="false"（缺点：每个都需要加，后续加的东西可能会有问题）
        // 2: 改变挂载对象：挂到根节点上：document.documentElement，再使用定位fixed目标元素，改变z-index
        // 问题：position: fixed滚动条不可滚动的坑 
        // 原因：position:fixed进行相对于视口（viewport）的定位，且元素的位置在屏幕滚动时不会改变
        // 解决：当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。给祖先元素设置一个transform: scale(1)属性即可

        hooks.callHook('reloadElement', !this.fullscreen); // 这里fullscreen还没变
        setTimeout(() => {
            var 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;
        }, 300);
    }
}

遇到的坑：

坑一：Failed to execute 'exitFullscreen' on 'Document': Document not active
    at Proxy.changeFullScree

原因：在没有全屏的状态下触发退出全屏的操作

解决：退出全屏时，判断一下当前的全屏状态

 坑二：全屏状态下，蚂蚁金服包含下拉框组件的下拉框不展示（包括时间选择，选择下拉框等）

原因：下拉框是往body里面插入的，全屏的元素盖住了下拉框。

解决方案一：给所有下拉框的加入:append-to-body="false"

问题：每个都需要加，后续加的东西可能会有问题。

解决方案二：改变挂载对象：挂到根节点上：document.documentElement，再使用定位fixed目标元素，改变z-index

问题：position: fixed滚动条不可滚动

原因：position:fixed进行相对于视口（viewport）的定位，且元素的位置在屏幕滚动时不会改变

解决：当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。给祖先元素设置一个transform: scale(1)属性即可