vue3:ant的a-drawer：placement设置为bottom，如何自定义设置动态宽度？指定 Drawer 挂载的节点？

父组件：点击运单数，弹窗展开，在section标注节点

<template>
  <div class="y-content-nopadding y-content-left-right">
    <section class="y-right-all" ref="wayRef">
      <div class="y-right-box y-right-block">
        <a-spin :spinning="loadingPage">
          <div class="y-right-block-item">
            <a-descriptions
              class="km-descriptions"
              title="发票抬头信息"
              :column="4"
              size="small"
              layout="vertical">
              <a-descriptions-item label="发票抬头">
                {{ sysCompanyInvoice?.rise }}
              </a-descriptions-item>
           </div>
          <div class="y-right-block-item">
            <a-descriptions
              class="km-descriptions"
              size="small"
              layout="vertical"
              title="开票要求"
              :column="4">
              <a-descriptions-item label="运单数">
                <a-button type="link" @click="waybillHandler">
                  {{ receiptTax.orderNumber }}
                </a-button>
              </a-descriptions-item>
              <a-descriptions-item label="开票金额"></a-descriptions-item>
            </a-descriptions>
          </div>
        </a-spin>
      </div>
      <footer>
        <div class="footer-btn">
          <a-button style="margin-right: 10px" @click="back">返回</a-button>
          <a-button type="primary" @click="save()" :loading="confirmLoading">
            确定
          </a-button>
        </div>
      </footer>

      <waybill-table-modal
        v-if="visibility"
        :visibilityModal="visibility"
        :waybillInfor="waybillInfor"
        @cancle="close"></waybill-table-modal>
    </section>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import waybillTableModal from './components/waybillTableModal.vue'
export default defineComponent({
  name: 'toInvoiced-applyinvoicing',
  components: { waybillTableModal },
  setup(props, { emit }) {
    const wayRef = ref()
    return {
      wayRef
    }
  }
})
</script>

子组件：placement设置为bottom，左右菜单宽度220px,margin-right：10px；声明动态变量wayWidth，利用css动态属性计算宽度calc(100% - 230px)，我需要以右侧为基准：right: 0，get-container挂在指定的父容器具体层级继承宽高

<template>
  <a-drawer
    title="运单列表"
    :placement="placement"
    :visible="openVisible"
    // 重点-开始
    :content-wrapper-style="{
      width: wayWidth,
      height: '550px',
      right: 0
    }"
    :get-container="() => $parent.$refs.wayRef"
    // 重点-结束
    @close="onClose"
    :closable="false"
    :footer-style="{ textAlign: 'center' }">
    <div class="y-content">
      <a-row class="y-table y-table-resize">
        <!-- 待确认 -->
        <a-table
          @resizeColumn="resizeHandler"
          :row-key="e => e.id"
          :columns="columns"
          :data-source="tableList"
          size="large"
          :pagination="pagination"
          :loading="loading"
          @change="tableChange"
          :scroll="tableScorll"></a-table>
      </a-row>
    </div>

    <template #extra>
      <CloseOutlined @click="onClose" />
    </template>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
    </template>
  </a-drawer>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted, watch } from 'vue'
export default defineComponent({
  name: 'waybill-table-modal',
  setup(props, { emit }) {
    // 重点-开始
    const style = `calc(100% - 230px)`
    const wayWidth = ref(style)
    // 重点-结束
    const data = reactive({
      placement: 'bottom',
      openVisible: props.visibilityModal
    })
    return {
      ...toRefs(data)
    }
  }
})
</script>