antdv drawer 在界面中做抽屉父级不被撑开 bug

问题描述

*. 当放置于容器内时-无法与平级共享父级，而是定位与父级之上，且其外边无法被自动撑开
*. 被超出隐藏无法将元素定位于弹窗左侧

效果图

const width = 300;
<div class="DashboardDoorRightDOM" :style="{ width: visible ? `${width}px` : `0px` }">
  <a-drawer
    :width="width"
    placement="right"
    :closable="false"
    :visible="visible"
    :getContainer="false"
    :style="{ position: 'relative' }"
    @close="targetRightDoor"
  >
    <div class="content_door flex-col">
      <!-- 伸缩按钮 -->
      <span
        @click="targetRightDoor"
        :style="{ position: 'absolute' }"
        class="clicker pointer flex flex-center fontS-25 color-font-2"
      >
         <double-left-outlined v-if="!visible" />
         <double-right-outlined v-else />
      </span>
    </div>
  </a-drawer>
</div>
let visible = ref<boolean>(true);

<style lang="scss" scoped>
.DashboardDoorRightDOM {
  > div {
    height: 100%;
  }
  .content_door {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #{$color-bg-4};
    border-left: 1px solid #{$color-border};
    .clicker {
      left: -29px;
      width: 28px;
      height: 29px;
      background-color: #{$color-bg-3};
      border-left: 1px solid #{$color-border};
      border-bottom: 1px solid #{$color-border};
      z-index: 99;
    }
  }
}

:deep(.ant-drawer-mask) {
  background-color: transparent;
}
:deep(.ant-drawer-content) {
  position: absolute;
  overflow: visible;
  .ant-drawer-wrapper-body {
    position: absolute;
    .ant-drawer-body {
      overflow: visible;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0;
    }
  }
}
</style>