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.xdnf.cn/news/34958.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【前端学习路线】(超详细版本)

先附上学习路线图&#xff1a;前端学习路线 第一阶段&#xff1a;前端入门&#xff08;htmlcss&#xff09; 前端最基本的知识&#xff0c;需要先将这些内容融汇贯通&#xff0c;学习后面内容才会不吃力。学习完可以做几个静态页练习一下。 推荐视频学习链接&#xff1a; 黑马程…

Vue生成类似于打卡页面

数据表格 <el-table :data"tableData" border height"calc(100vh - 240px)" :cell-style"cellFun"><el-table-column label"姓名" show-overflow-tooltip prop"name" align"center"/><el-table-co…

JVM学习《垃圾回收算法和垃圾回收器》

目录 1.垃圾回收算法 1.1 标记-清除算法 1.2 复制算法 1.3 标记-整理算法 1.4 分代收集算法 2.垃圾回收器 2.1 熟悉一下垃圾回收的一些名词 2.2 垃圾回收器有哪些&#xff1f; 2.3 Serial收集器 2.4 Parallel Scavenge收集器 2.5 ParNew收集器 2.6 CMS收集器 1.垃圾…

波特图方法

在电路设计中&#xff0c;波特图为最常用的稳定性余量判断方法&#xff0c;波特图的根源是如何来的&#xff0c;却鲜有人知。 本章节串联了奈奎斯特和波特图的渊源&#xff0c;给出了其对应关系和波特图相应的稳定性余量。 理论贯通&#xff0c;不在于精确绘…

【Java】2、集合框架 JCF

目录 CollectionListArrayList扩容机制System.arraycopy() 和 Arrays.copyOf()方法 LinkedList Set MapHashMap *重点&#xff1a; 底层机制&#xff08;源码&#xff09;应用场景 好处&#xff1a; 数组&#xff08;长度不可改&#xff0c;同一类型&#xff0c;增删不便&#…

P5461 赦免战俘

P5461 赦免战俘 #include <iostream> using namespace std; #include <algorithm> #include <vector> #include <cmath> void pardon(auto & matrix,int x,int y,int size){if(size 1) return;int half size / 2;for(int i x;i < x half;i …

GoTrackIt应用指南:共享单车时空轨迹可视化

GoTrackIt平台集成了对 Kepler.gl 可视化工具的部分功能进行了封装&#xff0c;通过引入 KeplerVis 类&#xff0c;显著简化了地理空间数据分析与展示的过程。利用这一类&#xff0c;开发者和数据分析师能够在网页端快速实现复杂地理数据的动态可视化&#xff0c;而无需深入掌握…

LeetCode 力扣 热题 100道(十五)搜索插入位置(C++)

给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 代码如下所示&#xff1a; class Solution { public:int searchIns…

JS中递归函数的理解及展开运算符在递归种的运用理解

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>递归函数</title> </head> <body> <script>const list ["你好", "吃饭了吗",["好",[[&qu…

vue中.sync修饰符的用法

一、什么是.sync修饰符 在Vue.js中&#xff0c;.sync 修饰符用于创建一个双向绑定的 prop。它使子组件能够更新父组件的 prop 值&#xff0c;实现父子组件之间的双向数据同步。具体来说&#xff0c;.sync 修饰符主要有以下几个功能&#xff1a; 简化双向绑定&#xff1a; 使用…

element Plus中 el-table表头宽度自适应,不换行

在工作中&#xff0c;使用el-table表格进行开发后&#xff0c;遇到了小屏幕显示器上显示表头文字会出现换行展示&#xff0c;比较影响美观&#xff0c;因此需要让表头的宽度变为不换行&#xff0c;且由内容自动撑开。 以下是作为工作记录&#xff0c;用于demo演示教程 先贴个…

rockit 学习、开发笔记(五)(VDEC)

前言 后面由于业务需求有rockit编解码的功能开发&#xff0c;这里我是第一次接触编解码&#xff0c;所以后续有些概念表述可能不太清楚&#xff0c;请各位多多包涵。 先来说一下解码模块的使用&#xff0c;rockit中的解码模块是VDEC&#xff0c;如果想要开发rockit的vdec可能…

unicloud微信小程序云端一体项目DEMO

最近应客户需求&#xff0c;做了一个产品展示的云开发小程序&#xff0c;从了解云开发到应用到实际项目的产品demo&#xff0c;希望大家能从中获取到对自己有用的东西。 说下心得体会吧&#xff0c;一般小项目用这种云开发确实会减少很多开发成本&#xff0c;人力成本&#xf…

图的创建和基础操作(数据结构实验作业)

上面是我的实验作业要求&#xff1a;&#xff08;看不到的同学&#xff0c;移步&#xff1a;https://gitee.com/young-lion/picture-bed/raw/master/202412051939715.png&#xff09; 下面的代码使用的是go语言&#xff1a; package mainimport ("fmt" )// 访问标记…

flex布局容易忽略的角色作用

目录 清除浮动 作用于行内元素 flex-basis宽度 案例一&#xff1a; 案例二&#xff1a; 案例三&#xff1a; flex-grow设置权重 案例一&#xff1a; 案例二&#xff1a; 简写flex-grow:1 0 auto; flex作为一维布局,行和列的使用&#xff0c;忽略的小角色&#xff0c;大…

javascript-svg-在圆环上拖动并选中区域

目录 问题描述解决思路代码结构 问题描述 假设我某个页面上使用了<svg>&#xff0c;其中包括一个<circle>。我希望实现的是&#xff1a;在circle上点击某个位置后&#xff0c;拖动&#xff0c;出现圆弧状阴影。实现效果为&#xff1a; 解决思路 要实现这个效果…

Android 使用 Canvas 和 Paint 实现圆形图片

学习笔记 效果展示: 全部代码: public class YuanActivity extends AppCompatActivity {private ActivityYuanBinding binding;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 通过 DataBinding 获取布局文件binding …

python怎么将字母大写

Python中有三种将字母转换为大写的方法&#xff1a;upper()、capitalize()、title()。 下面通过实例给大家介绍具体用法&#xff1a; str "www.php.com" print(str.upper()) # 把所有字符中的小写字母转换成大写字母 print(str.lower()) # 把所有字…

鸿蒙Next星河版高级用例之网络请求和自适应布局以及响应式布局

目录&#xff1a; 1、发起网络请求的两种方式第一种使用httpRequest发送http的请求&#xff1a;1.1、在进行网络请求前&#xff0c;您需要在module.json5文件中申明网络访问权限1.2、GET 请求1.3、POST请求1.4、处理响应的结果第二种使用axios发送http的请求&#xff1a;1.1、在…

ClouderaManager 集群搭建

前提&#xff1a;服务器之前做过域名映射、免密登录 ClouderaManager 集群 1. 组件分布规划 服务器服务器h1zk、hdfs(dn)、yarn(nm)、spark、kafka、flumeh2hdfs(nn-standy)、yarn(rm-active)、sparkh3hdfs(nn-active)、yarn(rm-standy)、hive、sparkh4zk、hdfs(dn)、yarn(n…