vue3 antd a-modal 弹窗全屏问题

a-modal 本身是不支持全屏功能的,高度需要自己设置

<template>
  <div ref="oneRef">
    <a-modal :wrap-class-name="isFullscreen ? 'full-modal' : ''" :get-container="() => $refs.oneRef"
      :visible="visible" @ok="saveData" @cancel="cancelData">
      <template #title>
        <div class="hcss">
          <span>标题</span>
          <a-button style="margin-right: 50px;" type="text" @click="toggleFullscreen">
            {{ isFullscreen ? '退出全屏' : '全屏' }}
          </a-button>
        </div>
      </template>

      <div>测试文字</div>

    </a-modal>
  </div>
</template>

<script lang="ts" setup>

  let  isFullscreen= ref(false);
  let  visible= ref(false);


 function   saveData() {
      visible.value = false
    }
 function   cancelData() {
     visible.value  = false
    }
 function   toggleFullscreen() {
     isFullscreen.value  = !this.isFullscreen
    }

</script>

<style lang="less" scoped>
.hcss{
	display: flex; 
	justify-content: space-between; 
	align-items: center;
}
::v-deep .full-modal {

  .ant-modal {
    max-width: 100%;
    width: 100vw !important;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .ant-modal-body {
    flex: 1;
    max-height: 100vh !important;
  }
}
</style>