页面全屏后antd的下拉框下拉选项不出现的问题

最近碰到数据可视化页面需要全屏的功能，但是全屏之后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值，达到重渲染的效果。