当前位置: 首页 > news >正文

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>

小屏效果图:

相关文章:

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

问题1&#xff1a;在全屏后 日期选择器的下拉框无法显示。 解决&#xff1a;在Ant-Design-Vue的文档中&#xff0c;很多含下拉框的组件都有一个属性 getPopupContainer可以用来指定弹出层的挂载节点。 在该组件上加上 getPopupContainer 属性,给挂载到最外层盒子上。 <temp…...

AMR移动机器人赋能制造业仓储自动化升级

在当今制造业的激烈竞争中&#xff0c;智能化、数字化已成为企业转型升级的关键路径。一家制造业巨头&#xff0c;凭借其庞大的生产体系和多个仓库资源&#xff0c;正以前所未有的决心和行动力&#xff0c;在制造业智能化浪潮中勇立潮头&#xff0c;开启了降本增效的新篇章。这…...

【PHP项目实战】活动报名系统

目录 项目介绍 开发语言 后端 前端 项目截图&#xff08;部分&#xff09; 首页 列表 详情 个人中心 后台管理 项目演示 项目介绍 本项目是一款基于手机浏览器的活动报名系统。它提供了一个方便快捷的活动报名解决方案&#xff0c;无需下载和安装任何APP&#xff0c…...

【HarmonyOS】Component组件引入报错 does not meet UI component syntax.

【HarmonyOS】Component组件引入报错 一、问题背景 有时会碰到引入组件时&#xff0c;无法import引入组件&#xff0c;导致引入的组件报错。 或者提示does not meet UI component syntax. &#xff08;不符合UI组件语法。&#xff09; 如下图所示&#xff0c;在引入组件时&a…...

vue3项目最新eslint9+prettier+husky+stylelint+vscode配置

一、eslint9和prettier通用配置 安装必装插件 ESlint9.x pnpm add eslintlatest -DESlint配置 vue 规则 , typescript解析器 pnpm add eslint-plugin-vue typescript-eslint -DESlint配置 JavaScript 规则 pnpm add eslint/js -D配置所有全局变量 globals pnpm add globa…...

备赛蓝桥杯--算法题目(3)

1. 2的幂 231. 2 的幂 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:bool isPowerOfTwo(int n) {return n>0&&n(n&(-n));} }; 2. 3的幂 326. 3 的幂 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:bool isPowerOfT…...

CSS中要注意的样式效果

1. 应用过渡效果 transition: var(--aa); 2.告诉浏览器元素可能会发生变换&#xff0c;从而优化性能。 will-change: transform; 3.使元素不响应鼠标事件。 pointer-events: none; 4.隐藏水平方向上的溢出内容 overflow-x: hidden; 5.定义一个元素的宽度和高度之间的比…...

【NIPS2024】Unique3D:从单张图像高效生成高质量的3D网格

背景&#xff08;现有方法的不足&#xff09;&#xff1a; 基于Score Distillation Sampling &#xff08;SDS&#xff09;的方法&#xff1a;从大型二维扩散模型中提取3D知识&#xff0c;生成多样化的3D结果&#xff0c;但存在每个案例长时间优化问题/不一致问题。 目前通过微…...

使用Kubernetes部署Spring Boot项目

目录 前提条件 新建Spring Boot项目并编写一个接口 新建Maven工程 导入 Spring Boot 相关的依赖 启动项目 编写Controller 测试接口 构建镜像 打jar包 新建Dockerfile文件 Linux目录准备 上传Dockerfile和target目录到Linux 制作镜像 查看镜像 测试镜像 上传镜…...

基于VTX356语音识别合成芯片的智能语音交互闹钟方案

一、方案概述 本方案旨在利用VTX356语音识别合成芯片强大的语音处理能力&#xff0c;结合蓝牙功能、APP或小程序&#xff0c;打造一款功能全面且智能化程度高的闹钟产品。除了基本的时钟显示和闹钟提醒功能外&#xff0c;还拥有正计时、倒计时、日程安排、重要日提醒以及番茄钟…...

git将一个项目的文件放到另一个项目的文件夹下

现有productA与productB项目&#xff0c;现将productA、productB放到productC下的mall-web文件下&#xff0c;目前只能实现保留productA的提交记录&#xff0c;暂不能实现保留两个的提交记录 一.克隆最新的productC的库&#xff0c;这里指mall-web 二.将productA复制到mall-we…...

Cannon.js 从入门到精通

开发领域&#xff1a;前端开发 | AI 应用 | Web3D | 元宇宙 技术栈&#xff1a;JavaScript、React、ThreeJs、WebGL、Go 经验经验&#xff1a;6 年 前端开发经验&#xff0c;专注于图形渲染和 AI 技术 开源项目&#xff1a;智简未来、数字孪生引擎 github 大家好&#xff01;我…...

深入理解 TCP 标志位(TCP Flags)

深入理解 TCP 标志位&#xff08;TCP Flags&#xff09; 1. 简介 在网络安全和网络分析领域&#xff0c;TCP标志位&#xff08;TCP Flags&#xff09;是理解网络行为和流量模式的关键概念。特别是在使用工具如Nmap进行端口扫描时&#xff0c;理解这些标志位的意义和用法至关重…...

K8S,StatefulSet

有状态应用 Deployment实际上并不足以覆盖所有的应用编排问题&#xff1f; 分布式应用&#xff0c;它的多个实例之间&#xff0c;往往有依赖关系&#xff0c;比如&#xff1a;主从关系、主备关系。 还有就是数据存储类应用&#xff0c;它的多个实例&#xff0c;往往都会在本地…...

JavaScript动态网络爬取:深入解析与实践指南

引言 随着互联网技术的发展&#xff0c;越来越多的网站采用动态加载技术来提供丰富的用户体验。这些动态内容的加载依赖于JavaScript&#xff0c;给传统的网络爬虫带来了挑战。JavaScript动态网络爬取技术应运而生&#xff0c;它允许开发者模拟用户行为&#xff0c;获取动态加…...

MySql:Centos7安装MySql

目录 安装之前&#xff0c;清除MySql残留文件 下载MySql的官方yum源 安装MySql 服务 MySql配置 常见问题 本次安装基于Centos7&#xff0c;平台为云服务器&#xff0c;由XShell软件演示。 注意&#xff0c;请将用户切换为Root用户。 安装之前&#xff0c;清除MySql残留文…...

Vector软件CANdb++的信号起始位Bug

问题现象 前几天导入DBC文件发现不对劲&#xff0c;怎么生成代码的起始地址都怪怪的&#xff0c;检查下工程里面的配置&#xff0c;还真的是这样&#xff0c;一路查到输入文件——DBC文件&#xff0c;发现是DBC文件就有错误&#xff1a;一些CAN报文之后8字节长度&#xff0c;也…...

elasticsearch-7.14.0集群部署+kibana

1、修改系统参数 用户对软件的内存和硬盘使用权限 vim /etc/security/limits.conf * soft nproc 655350 * soft nofile 655350 * hard nproc 655350 * hard nofile 655350修改最大线程数 vim /etc/sysctl.conf vm.max_map_count262144配置用户最大的线程数 vim /etc/security/…...

如何给GitHub的开源项目贡献PR

&#x1f3af;导读&#xff1a;本文详细介绍了如何向开源项目“代码随想录”贡献自己的题解。首先&#xff0c;需要Fork原项目的仓库至个人GitHub账户&#xff0c;然后解决克隆仓库时可能遇到的SSH密钥问题。接着&#xff0c;按照标准流程对本地仓库进行代码或文档的修改&#…...

神经网络-CNN

卷积神经网络 CNN 感受野 感受野&#xff08;Receptive Field&#xff09;在卷积神经网络&#xff08;CNN&#xff09;中是一个非常重要的概念&#xff0c;它描述了网络中某一层的输出&#xff08;通常是特征图上的一个像素点&#xff09;所对应的输入图像上的空间范围。 1. 定…...

告别龟速下载!Windows下用VSCode离线包5分钟搞定ESP-IDF环境(附镜像加速)

5分钟极速部署&#xff1a;Windows下VSCode与ESP-IDF开发环境实战指南 当第一次接触ESP32开发时&#xff0c;许多开发者都会遇到一个共同的难题——官方工具链的下载速度慢如蜗牛。这不仅浪费宝贵时间&#xff0c;还可能让初学者在配置阶段就失去耐心。本文将分享一套经过实战…...

手把手教你搞定KEIL4.74社区版激活:从注册到填问卷拿License的全流程避坑

KEIL 4.74社区版激活全流程实战指南&#xff1a;从零开始到成功获取License的完整攻略 作为一名嵌入式开发新手&#xff0c;第一次接触KEIL这个强大的开发环境时&#xff0c;难免会被其复杂的激活流程搞得晕头转向。特别是社区版的KEIL 4.74&#xff0c;虽然免费&#xff0c;但…...

成都不良资产收包出包难?专业处置破局存量盘活困境

不仅如此&#xff0c;规范化的不良资产处置模式&#xff0c;还能助力区域化解债务风险&#xff0c;稳定地方金融环境&#xff0c;激活存量资产活力&#xff0c;对地方经济发展起到正向推动作用。不良资产收包出包&#xff0c;拼的从来不是蛮力与时间&#xff0c;而是专业、合规…...

从ARM Cortex-M到FPGA:手把手教你用AXI4-Lite搭建自定义外设(以Zynq-7000为例)

从ARM Cortex-M到FPGA&#xff1a;用AXI4-Lite实现自定义外设的工程实践 在嵌入式系统开发中&#xff0c;处理器与可编程逻辑的高效协同一直是提升性能的关键路径。当标准外设无法满足特定需求时&#xff0c;工程师往往需要在FPGA中设计定制硬件模块&#xff0c;并通过标准化总…...

ArcGIS 10.2也能用天地图!手把手教你用WMTS服务和lyr文件搞定低版本兼容

ArcGIS 10.2兼容天地图WMTS服务的工程级解决方案 在GIS项目实施过程中&#xff0c;我们常常会遇到软件版本滞后于服务更新的尴尬局面。天地图作为国内权威的地理信息服务&#xff0c;自2019年起仅支持ArcGIS 10.6及以上版本直接加载&#xff0c;这对仍在使用ArcGIS 10.2/10.3等…...

如何快速掌握League-Toolkit:英雄联盟玩家的终极辅助工具指南

如何快速掌握League-Toolkit&#xff1a;英雄联盟玩家的终极辅助工具指南 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是一款…...

从7805到D-CAP2:TPS54229E实现12V转5V高效电源设计

1. 从线性稳压到D-CAP2&#xff1a;一个电源工程师的选型心路刚入行那会儿&#xff0c;画的第一块51单片机板子&#xff0c;电源部分几乎不用想&#xff0c;一个7805三端稳压器&#xff0c;加上输入输出两个电解电容&#xff0c;齐活。这东西皮实、便宜&#xff0c;满大街都是&…...

【Perplexity医生信息搜索实战指南】:3大隐藏技巧让临床决策效率提升70%

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Perplexity医生信息搜索实战指南概述 Perplexity 是一款基于大语言模型的智能搜索工具&#xff0c;其核心优势在于支持自然语言提问、实时联网检索与引用溯源。在医疗健康领域&#xff0c;尤其面向医生资质核查…...

Git忽略文件失效?一招解决!

场景&#xff1a; 在某次 Git 提交时&#xff0c;忘记在 .gitignore 文件中添加上某个原本应该被忽略的文件夹或者文件&#xff0c;于是后一次的提交时在 .gitignore 加上了这些文件&#xff0c;但是在远程的仓库中这些文件夹、文件却并没有消失。这个属于属于什么问题&#xf…...

企业号码认证服务:实现座机、手机来电显示公司名称+品牌LOGO

在如今的商业环境下&#xff0c;一通没有身份标识的电话&#xff0c;想要敲开客户的大门已经变得越来越难。反诈意识的普及&#xff0c;让人们对陌生呼叫筑起了厚厚的防御墙。许多企业在开展客户回访、售后跟进或业务接洽时&#xff0c;频繁遭遇拒接、秒挂的窘境。投入了大笔的…...