当前位置: 首页 > 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>

小屏效果图:

http://www.lryc.cn/news/498454.html

相关文章:

  • AMR移动机器人赋能制造业仓储自动化升级
  • 【PHP项目实战】活动报名系统
  • 【HarmonyOS】Component组件引入报错 does not meet UI component syntax.
  • vue3项目最新eslint9+prettier+husky+stylelint+vscode配置
  • 备赛蓝桥杯--算法题目(3)
  • CSS中要注意的样式效果
  • 【NIPS2024】Unique3D:从单张图像高效生成高质量的3D网格
  • 使用Kubernetes部署Spring Boot项目
  • 基于VTX356语音识别合成芯片的智能语音交互闹钟方案
  • git将一个项目的文件放到另一个项目的文件夹下
  • Cannon.js 从入门到精通
  • 深入理解 TCP 标志位(TCP Flags)
  • K8S,StatefulSet
  • JavaScript动态网络爬取:深入解析与实践指南
  • MySql:Centos7安装MySql
  • Vector软件CANdb++的信号起始位Bug
  • elasticsearch-7.14.0集群部署+kibana
  • 如何给GitHub的开源项目贡献PR
  • 神经网络-CNN
  • 4.Vue-------this.$set()的使用和详细过程-------vue知识积累
  • 服务器上的常见Linux命令教程
  • 汽车总线协议分析-FlexRay总线
  • Java 集合:强大的数据管理工具
  • FFmpeg 4.3 音视频-多路H265监控录放C++开发十九,ffmpeg复用
  • python之Django连接数据库
  • 基于Springboot+Vue的在线答题闯关系统
  • 声音克隆GPT-SoVITS
  • 【STM32 Modbus编程】-作为主设备读取保持/输入寄存器
  • 前端开发入门指南Day 17:TypeScript高级类型(泛型,类型守卫,Partial<T>和 Required<T>等)
  • flex布局容易忽略的角色作用