問題1：在全屏后 日期選擇器的下拉框無法顯示。

解決：在Ant-Design-Vue的文檔中，很多含下拉框的組件都有一個屬性?getPopupContainer可以用來指定彈出層的掛載節(jié)點。

在該組件上加上?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：全屏能正常顯示了，但是非全屏?xí)r樣式又錯亂了。

（上圖為全屏狀態(tài)，下圖為非全屏狀態(tài)，位置跑偏了）

解決：另外添加一個元素，我這里隨便取的類名class="cc"，讓該下拉組件掛載到.cc盒子上，給cc設(shè)置絕對定位，調(diào)整位置，使得下拉框剛好能對上。

<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>

小屏效果圖：