最近碰到数据可视化页面需要全屏的功能，但是全屏之后ant design of vue组件的下拉框点击之后无法出现下拉选项。
原因：下拉框的下拉部分父节点默认是body，全屏后body元素被挡住了
全屏功能实现：
<div class="large-screen" ref="el">
<div class="large-screen-full-btn" @click="switchFullscreen">
<FullscreenOutlined />
</div>
</div>
const el = ref()
const isFullScreen = ref(false)
// 全屏
function switchFullscreen() {
isFullScreen.value = !isFullScreen.value
if (document.fullscreenElement !== el.value) {
el.value?.requestFullscreen()
} else {
document.exitFullscreen()
}
}
解决方法：在全屏的时候把下拉框的下拉部分父节点设置成当前组件根元素
实现：
<div class="temperature">
........ <a-select class="warehouse" v-model:value="warehouse" :options="warehouseOption" :getPopupContainer="getPopupContainer" :key="num" > </a-select> </div>
// 改变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值，达到重渲染的效果。
标签：el,value,isFullScreen,全屏,antd,document,下拉框 From： https://www.cnblogs.com/ljiali/p/18103191