Ant-Design-Vue 全屏下拉日期框无法显示,能显示后小屏又位置错乱

问题1:在全屏后 日期选择器的下拉框无法显示。

解决:在Ant-Design-Vue的文档中,很多含下拉框的组件都有一个属性 getPopupContainer可以用来指定弹出层的挂载节点。

在该组件上加上 getPopupContainer 属性,给挂载到最外层盒子上。

<template><div class="container_max">...时间筛选<RangePicker v-model:value="state.timeValue" picker="month" class="range-picker":get-popup-container="getPopupContainer" />...</div>
</template><script setup lang="ts">
// 获取弹窗容器
const getPopupContainer = (): any => {return document.querySelector('.container_max') as HTMLElement;
};
</script>

问题2:全屏能正常显示了,但是非全屏时样式又错乱了。

(上图为全屏状态,下图为非全屏状态,位置跑偏了)

解决:另外添加一个元素,我这里随便取的类名class="cc",让该下拉组件挂载到.cc盒子上,给cc设置绝对定位,调整位置,使得下拉框刚好能对上。

<template><div class="window">时间筛选<RangePicker v-model:value="state.timeValue" picker="month" class="range-picker":get-popup-container="getPopupContainer" /><a-button class="reset" @click="resetKey"><UndoOutlined />重置</a-button><a-button class="se" @click="onSearch"><SearchOutlined />搜索</a-button><a-button class="cc"></a-button></div>
</template>
<script setup lang="ts">
// 获取弹窗容器
const getPopupContainer = (): any => {// 判断是否全屏,返回不同的容器if (document.fullscreenElement !== null) {return document.querySelector('.window') as HTMLElement;} else {return document.querySelector('.cc') as HTMLElement;}
};
</script>
<style lang="less" scoped>.cc {position: absolute;margin-top: 1030px;margin-left: 540px;}
</style>

小屏效果图:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php 系统函数 记录

PHP intval() 函数 PHP函数介绍—array_key_exists(): 检查数组中是否存在特定键名 如何使用PHP中的parse_url函数解析URL PHP is_array()函数详解&#xff0c;PHP判断是否为数组 PHP函数介绍&#xff1a;in_array()函数 strpos定义和用法 strpos() 函数查找字符串在另一字符串…

Hive学习基本概念

基本概念 hive是什么&#xff1f; Facebook 开源&#xff0c;用于解决海量结构化日志的数据统计。 基于Hadoop的一个数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张表&#xff0c;并提供类SQL查询功能 本质是将HQL转化为MapReduce程序。 Hive处理的数据存储在H…

chrome使用问题记录

1. http自动跳转https问题 step1. 地址栏输入&#xff1a; chrome://net-internals/#hsts step2. 找到底部Delete domain security policies一栏&#xff0c;输入想处理的域名&#xff0c;点击delete。 注意&#xff1a;输入域名时去掉前缀http step3. 搞定了&#xff0c;再…

内网穿透 natapp安装与使用

前言 NATAPP是一款基于ngrok的内网穿透工具。以下是对NATAPP的详细概述&#xff1a; 基本概念 定义&#xff1a;内网穿透&#xff08;NAT穿透&#xff09;是一种技术&#xff0c;它允许具有特定源IP地址和端口号的数据包能够绕过NAT设备&#xff0c;从而被正确地路由到内网主机…

计算机光电成像理论基础

一、透过散射介质成像 1.1 光在散射介质中传输 光子携带物体信息并进行成像的过程是一个涉及光与物质相互作用的物理现象。这个过程可以分为几个步骤来理解&#xff1a; 1. **光的发射或反射**&#xff1a; - 自然界中的物体可以发射光&#xff08;如太阳&#xff09;&am…

视频监控汇聚平台Liveweb视频安防监控实时视频监控系统操作方案

Liveweb国标GB28181视频平台是一种基于国标GB/T28181协议的安防视频流媒体能力平台。它支持多种视频功能&#xff0c;包括实时监控直播、录像、检索与回看、语音对讲、云存储、告警以及平台级联等功能。该平台部署简单、可扩展性强&#xff0c;支持全终端、全平台分发接入的视频…

ASP.NET Core 9.0 静态资产传递优化 (MapStaticAssets )

一、结论 &#x1f4a2;先看结论吧&#xff0c; MapStaticAssets 在大多数情况下可以替换 UseStaticFiles&#xff0c;它已针对为应用在生成和发布时了解的资产提供服务进行了优化。 如果应用服务来自其他位置&#xff08;如磁盘或嵌入资源&#xff09;的资产&#xff0c;则应…

在 Windows 11 WSL (Ubuntu 24.04.1 LTS) | Python 3.12.x 下部署密码学库 charm

1. 在 Windows 11 上部署 Ubuntu (WSL) 由于作者没有高性能的 Ubuntu 服务器或个人电脑&#xff0c;且公司或学校提供的 Ubuntu 服务器虽然提供高性能 GPU 等硬件配置但通常不会提供 root 权限&#xff0c;因而作者通过在搭载了 Windows 11 的个人电脑上启动 Ubuntu (WSL) 来进…

Qt自定义 Qt Designer 插件

创建 Qt Designer 插件项目 Qt 提供两种设计插件的 API&#xff0c;可以用于扩展 Qt 的功能。高级 API 用于设计插件以扩展 Qt 的功能&#xff0c;例如定制数据库驱动、图像格式、文本编码、定制样式等。Qt Designer 里大量采用了插件&#xff0c;点击 Qt Creator 的“Help”-…

springboot利用easypoi实现简单导出Excel

vue springboot利用easypoi实现简单导出 前言一、easypoi是什么&#xff1f;二、使用步骤 1.传送门2.前端vue3.后端springboot 3.1编写实体类&#xff08;我这里是dto,也一样&#xff09;3.2控制层结尾 前言 今天玩了一下springboot利用easypoi实现excel的导出&#xff0c;以前…

【学习总结|DAY012】Java面向对象基础

一、前言 今天主要学习了以下内容&#xff1a;面向对象的理解与使用、对象的内存布局、构造器的概念和作用、封装的重要性以及JavaBean实体类的实现等。下面我将详细阐述这些知识点。 二、面向对象的理解与使用 1. 什么是面向对象&#xff1f; 类&#xff1a;一种特殊的数据…

【免费】最新区块链钱包和私钥的助记词碰撞器,bybit使用python开发

使用要求 1、用的是google里面的扩展打包成crx文件&#xff0c;所以在使用之前你需要确保自己电脑上有google浏览器&#xff0c;而且google浏览器版本需要在124之上。&#xff08;要注意一下&#xff0c;就是电脑只能有一个Chrome浏览器&#xff09; 2、在win10上用vscode开发…

【AI模型对比】AI新宠Kimi与ChatGPT的全面对比:技术、性能、应用全揭秘

文章目录 Moss前沿AI技术背景Kimi人工智能的技术积淀ChatGPT的技术优势 详细对比列表模型研发Kimi大模型的研发历程ChatGPT的发展演进 参数规模与架构Kimi大模型的参数规模解析ChatGPT的参数体系 模型表现与局限性Kimi大模型的表现ChatGPT的表现 结论&#xff1a;如何选择适合自…

C#实时监控指定文件夹中的动态,并将文件夹中生成的新图片显示在界面上(相机采图,并且从本地拿图)

结果展示 此类原理适用于文件夹中自动生成图片&#xff0c;并提取最新生成的图片将其显示&#xff0c; 如果你是相机采图将其保存到本地&#xff0c;可以用这中方法可视化&#xff0c;并将检测的结果和图片匹配 理论上任何文件都是可以监视并显示的&#xff0c;我这里只是做了…

Unity性能优化---动态网格组合(二)

在上一篇中&#xff0c;组合的是同一个材质球的网格&#xff0c;如果其中有不一样的材质球会发生什么&#xff1f;如下图&#xff1a; 将场景中的一个物体替换为不同的材质球 运行之后&#xff0c;就变成了相同的材质。 要实现组合不同材质的网格步骤如下&#xff1a; 在父物体…

深入解析Spring AI框架:在Java应用中实现智能化交互的关键

众所周知&#xff0c;Java是一种面向对象的编程语言&#xff0c;因此不论我们调用什么AI接口&#xff0c;从业务的角度来看&#xff0c;它本质上只是一个接口&#xff0c;而AI则充当了一个第三方对接平台。然而&#xff0c;值得注意的是&#xff0c;AI的聊天回复往往不适用于对…

idea 自动导包,并且禁止自动导 *(java.io.*)

自动导包配置 进入 idea 设置&#xff0c;可以按下图所示寻找位置&#xff0c;也可以直接输入 auto import 快速定位到配置。 Add unambiguous imports on the fly&#xff1a;自动帮我们优化导入的包Optimize imports on the fly&#xff1a;自动去掉一些没有用到的包 禁止导…

基于C++实现的(控制台)双人俄罗斯方块小游戏

基于win32控制台应用程序的双人俄罗斯方块小游戏 1. 课题概述 1.1 课题目标和主要内容 使用visual studio 2015在win32控制台应用程序下用多线程实现双人同时进行俄罗斯方块的桌面游戏。最终将要完成的效果如图1.1所示&#xff0c;左右共两片工作区&#xff0c;也是游戏的主…

Python subprocess.run 使用注意事项,避免出现list index out of range

在执行iOS UI 自动化专项测试的时候&#xff0c;在运行第一遍的时候遇到了这样的错误&#xff1a; 2024-12-04 20:22:27 ERROR conftest pytest_runtest_makereport 106 Test test_open_stream.py::TestOpenStream::test_xxx_open_stream[iPhoneX-xxx-1-250] failed with err…

力扣1401. 圆和矩形是否有重叠

用矢量计算&#xff1a; class Solution { public:bool checkOverlap(int radius, int xCenter, int yCenter, int x1, int y1, int x2, int y2) {//矩形中心float Tx(float)(x1x2)/2;float Ty(float)(y1y2)/2;//强行进行对称操作&#xff0c;只考虑第一象限if(xCenter<Tx)…