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即可。(这个方式比较简单粗暴)

示例:

// 全屏事件
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();
        };
    };
},
.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;
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/109952.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ansible中常用模块

1.ansible实现管理的方式 Ad-Hoc //利用ansible命令直接完成管理,主要用于临时命令使用场景 playbook //ansible脚本,主要用于大型项目场景,需要前期的规划 2.Ad-Hoc执行方式中如何获得帮助 ansible-doc …

测试C#调用Aplayer播放视频(1:加载Aplayer控件)

微信公众号“Dotnet跨平台”的文章《开源精品,使用 C# 开发的 KTV 点歌项目》中使用了迅雷开源APlayer播放引擎。最近在学习有哪些能拿来播放视频的组件或控件,于是准备试试,根据文章中的介绍,在迅雷APlayer播放引擎网站中下载了A…

Jetpack:023-Jetpack中的事件二

文章目录 1. 知识回顾2. 使用方法2.1 单击事件2.2 双击事件2.3 长按事件2.4 滑动事件 3. 示例代码4. 内容总结 我们在上一章回中介绍了 Jetpack中事件相关的内容,本章回中继续介绍这方面的内容。闲话休提,让我们一起Talk Android Jetpack吧!…

消息中间件——RabbitMQ(一)Windows/Linux环境搭建(完整版)

前言 最近在学习消息中间件——RabbitMQ,打算把这个学习过程记录下来。此章主要介绍环境搭建。此次主要是单机搭建(条件有限),包括在Windows、Linux环境下的搭建,以及RabbitMQ的监控平台搭建。 环境准备 在搭建Rabb…

matlab simulink 遗传算法优化RBF

1、内容简介 略 2-可以交流、咨询、答疑 2、内容说明 先用遗传算法优化RBF的权重系数,然后用RBF来做个控制器,查看效果 遗传算法、RBF控制、优化 3、仿真分析 4、参考论文 略

【AI视野·今日Robot 机器人论文速览 第六十期】Mon, 23 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Mon, 23 Oct 2023 Totally 26 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers A Review of Prospects and Opportunities in Disassembly with Human-Robot Collaboration Authors Meng Lun Lee, Xiao Lian…

Kibana无法启动 kibana_task_manager search_phase_execution_exception 问题解决

今天服务器重启以后,发现无法启动Kibana服务了,在网上也是把错误搜索了半天,尝试了那些命令,但是执行删除命令时居然报错了。后来,仔细观察后,发现是删除方式不太正确,需要改一下删除命令才能正…

黑豹程序员-架构师学习路线图-百科:PowerDesigner数据库建模的行业标准

PowerDesigner最初由Xiao-Yun Wang(王晓昀)在SDP Technologies公司开发完成。 目前PowerDesigner是Sybase的企业建模和设计解决方案,采用模型驱动方法,将业务与IT结合起来,可帮助部署有效的企业体系架构,并…

【2023.10.30练习】C语言-循环右移字符

计算机能力挑战初赛2020.19题 题目描述: 现要对一个由字符a-z和A-Z组成的字符串进行解密,已知加密规则是: 字符串中所有字符分别在大写或小写的字母表中被循环左移5位(fGh-->aBc), 输入:一个加密过的字符串&#…

强化学习------DDQN算法

前言 DQN算法 DQN算法有一个显著的问题,就是DQN估计的Q值往往会偏大。这是由于我们Q值是以下一个s’的Q值的最大值来估算的,但下一个state的Q值也是一个估算值,也依赖它的下一个state的Q值…,这就导致了Q值往往会有偏大的的情况…

设计模式之备忘录模式

文章目录 一、介绍二、应用举例三、基本角色四、代码演示五、总结 一、介绍 备忘录模式(Memento Pattern),属于行为型设计模式。目的是用于保存一个对象在某一时刻的状态,以便于在将来某个时刻根据此状态恢复该对象。 在我们日常生活中,备忘…

【腾讯云 HAI域探秘】——锋体验官测试感受

腾讯云 HAR域探秘活动CSDN主页:腾讯云“HAI域探秘“新品先锋体验官招募,丰厚大奖限时领取!_CSDN资讯的博客-CSDN博客 前言 参加这次活动感受到自动的好处,有句话叫做前人种树后人乘凉,对于我这样的AI小白来说&#x…

Android多张图片rotation旋转角度叠加/重叠堆放

Android多张图片rotation旋转角度叠加/重叠堆放 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"…

Node学习笔记之MongoDB

一、简介 1.1 Mongodb 是什么 MongoDB 是一个基于分布式文件存储的数据库&#xff0c;官方地址 MongoDB: The Developer Data Platform | MongoDB 1.2 为什么选择 Mongodb 操作语法与 JavaScript 类似&#xff0c;容易上手&#xff0c;学习成本低 二、核心概念 Mongodb 中…

CAN总线通信协议

Reference video: 趋近于完美的通讯 CAN总线&#xff01;4分钟看懂&#xff01; CAN通信精华整理&#xff0c;汽车工程师必备技能&#xff0c;一个视频带你轻松掌握&#xff01; 写在前面&#xff1a;CAN通信就三个要点 - 波特率的配置 - 过滤寄存器的配置与理解&#xff08;…

Linux mv命令:移动文件或改名

mv 命令&#xff08;move 的缩写&#xff09;&#xff0c;既可以在不同的目录之间移动文件或目录&#xff0c;也可以对文件和目录进行重命名。该命令的基本格式如下&#xff1a; [rootlocalhost ~]# mv 【选项】 源文件 目标文件 -f&#xff1a;强制覆盖&#xff0c;如果目标文…

配置Super-VLAN下的DHCP服务器示例

组网需求 如图1所示&#xff0c;某公司拥有两个部门&#xff0c;为了节省IP地址&#xff0c;部门A和部门B规划为同一网段&#xff1b;为了提升业务安全性&#xff0c;将不同部门的用户划分到不同VLAN中。企业管理员为了方便统一管理&#xff0c;希望部门内终端通过DHCP服务器动…

Java精品项目源码爱心捐赠平台网站(编号V65)

Java精品项目源码扶农助农平台建设系统(编号V64) 大家好&#xff0c;小辰今天给大家介绍一个爱心捐赠平台网站(编号V65)&#xff0c;演示视频公众号&#xff08;小辰哥的Java&#xff09;对号查询观看即可 文章目录 Java精品项目源码扶农助农平台建设系统(编号V64)难度指数&a…

Failed to prepare the device for development

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

chat gpt 在开发当中的应用

chatgpt 出来已经有一段时间了&#xff0c;本人在开发的过程中也是有去使用。 经常使用的是讯飞大模型和通义千问&#xff0c;在使用的过程中&#xff0c;个人感觉讯飞大模型在写代码方面会比较智能。 比如问一个 sqlser 单表 数据量 几个亿如何处理的问题&#xff0c;讯飞会给…