最近碰到数据可视化页面需要全屏的功能，但是全屏之后ant design of vue组件的下拉框点击之后无法出现下拉选项。
原因：下拉框的下拉部分父节点默认是body，全屏后body元素被挡住了
全屏功能实现：
const el = ref()
const isFullScreen = ref(false)
// 全屏
function switchFullscreen() {
isFullScreen.value = !isFullScreen.value
if (document.fullscreenElement !== el.value) {
el.value?.requestFullscreen()
} else {
document.exitFullscreen()
}
}
解决方法：在全屏的时候把下拉框的下拉部分父节点设置成当前组件根元素
实现：
class="warehouse" v-model:value="warehouse" :options="warehouseOption" :getPopupContainer="getPopupContainer" :key="num" >
// 改变num的值，重渲染下拉框组件
const num = ref(0)
function getPopupContainer() {
// 返回一个 DOM 元素作为弹出层的挂载容器
return props.isFullScreen ? document.querySelector('.temperature') : document.querySelector('body')
}
watch(() => props.isFullScreen, (newVal) => { num.value++ })
在全屏切换时下拉部分并不会重渲染，这会导致由非全屏切换为全屏状态时下拉菜单不会出现，所以需要给下拉框设置key属性，并在切换状态时改变key值，达到重渲染的效果。