antd+全屏的坑(全屏下a-modal/下拉框等不展示)

问题:针对某个元素全屏时,下拉框/弹窗/二次确认窗不展示:下拉框是往body里面插入的,全屏的元素盖住了下拉框。解决:给有下拉框的加入:append-to-body="false"(缺点:每个都需要加,后续加的东西可能会有问题)

针对以上问题解决方案

方案一 :改变挂载对象。挂到根节点上:document.documentElement,再使用定位fixed目标元素,改变z-index。(全屏的还是根节点,全屏时给跟节点加class,再进行fixed)。这样解决会有个问题:position: fixed滚动条不可滚动的坑。

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

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

方案二:全屏的时候给顶级元素加上一个class,写一份存在这个class下的样式去display:none需要隐藏的元素,关闭全屏时去掉这个class即可。(这个方式比较简单粗暴)

示例:

javascript 复制代码
// 全屏事件
handleFullScreen(){
    let appDoc = document.getElementById('app-view'); // 找到跟节点加
    appDoc.setAttribute("class", "full-app"); // 加上这个class

    var element = document.documentElement; // 根结点
    // 如果是全屏状态
    if (this.checkFull()) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
        }
        appDoc.removeAttribute("class", "full-app"); // 退出全屏去掉这个class
    } 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();
        };
    };
},
css 复制代码
.full-app { // 隐藏不需要展示的元素
    .bg-gradient-wight,
    .eye-hor-layout .ant-layout-sider,
    .eye-ver-layout__header,
    .ant-tabs-bar, 
    .eye-sky-layout .eye-logo, .eye-sky-layout .ant-layout-header  {
        display: none;
    }
    .eye-hor-layout .ant-layout-sider {
        display: none;
    }
}
相关推荐
自由逐风几秒前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子几秒前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤4 分钟前
流量分发代码实战|学会用JS控制用户访问路径
javascript
欢乐时光c5 分钟前
常见请求头响应头的含义
前端·面试
wzyoung5 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户73087011793085 分钟前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥5 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一6 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码7 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端
盏茶作酒297 分钟前
打造自己的组件库(二)CSS工程化方案
前端