有的網(wǎng)站打開的是html結(jié)尾的路徑有的不是互聯(lián)網(wǎng)運(yùn)營(yíng)推廣公司
問題1:在全屏后 日期選擇器的下拉框無法顯示。
解決:在Ant-Design-Vue的文檔中,很多含下拉框的組件都有一個(gè)屬性?getPopupContainer可以用來指定彈出層的掛載節(jié)點(diǎn)。
在該組件上加上?getPopupContainer?屬性,給掛載到最外層盒子上。
<template><div class="container_max">...時(shí)間篩選<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樣式又錯(cuò)亂了。
(上圖為全屏狀態(tài),下圖為非全屏狀態(tài),位置跑偏了)
解決:另外添加一個(gè)元素,我這里隨便取的類名class="cc",讓該下拉組件掛載到.cc盒子上,給cc設(shè)置絕對(duì)定位,調(diào)整位置,使得下拉框剛好能對(duì)上。
<template><div class="window">時(shí)間篩選<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>
小屏效果圖: