解决ant-design-vue的Modal组件 设置全屏不生效，css样式无法更改

问题环境：

vue：^3.2.21

ant-design-vue：2.2.8

问题描述：

在使用 ant-design-vue 的 Modal 组件，按照官网设置全屏样式不生效，ant-modal样式top值无法覆盖，导致上面空余了一部分。

解决方法：

参考了网上的写法使用官网上给出的API，最终解决方案如下：

官网API:

getContainer

指定 Modal 挂载的 HTML 节点

(instance): HTMLElement

() => document.body

需要在Modal组件外围包裹一层Div，设置ref，完事再使用  getContainer  方法指定节点最终生效

完整代码：

<template>
  <div ref="modalRef">
    <Modal
      v-model:visible="visible"
      title="详情"
      width="100%"
      :get-container="() => $refs.modalRef"
    >
      123123
    </Modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Modal } from 'ant-design-vue';
  const modalRef = ref();
  let visible = ref(false);
  defineExpose({
    visible,
  });
</script>

<style lang="less" scoped>
  :deep .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  :deep .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  :deep .ant-modal-body {
    flex: 1;
  }

  // 上下两种 那个生效用那个

  ::v-deep(.ant-modal) {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  ::v-deep(.ant-modal-content) {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  ::v-deep(.ant-modal-body) {
    flex: 1;
  }
</style>