Ant Design Vue 4.0 a-modal弹窗组件封装

父组件（部分）

<template>
  <div>
    <a-button
      type="primary"
      ghost
      @click="dialogPanelStatus.signIngInfoStatus = true"
      >签约信息</a-button
    >
  </div>
  <!-- 签约信息 -->
  <SigningInfo
    :signIngInfoStatus="dialogPanelStatus.signIngInfoStatus"
    :walletData="walletData"
    @closeDialog="closeDialog"
  />
</template>
<script setup>
  import SigningInfo from "@/components/Income/SigningInfo.vue";
  // DIalog弹窗状态
  const dialogPanelStatus = reactive<DialogPanelStatus>({
    signIngInfoStatus: false,
  });
  // 数据重载
  const getMyWalletFn = () => {
    // 数据重载
  };
  // 关闭弹窗
  const closeDialog = (k: keyof DialogPanelStatus, rest: boolean) => {
    dialogPanelStatus[k] = false;
    rest && getMyWalletFn(true);
  };
</script>

<style scoped>
  @import "Income.less";
</style>

弹窗子组件

<template>
  <a-modal
    :open="visible"
    title="弹框"
    :footer="null"
    destroyOnClose
    :maskClosable="false"
    @cancel="closeDialogFn(false)"
  >
    <div>
      <a-card size="small" hoverable>
        <p>真实姓名：{{ walletData.real_name }}</p>
      </a-card>
      <a-card size="small" hoverable>
        <p>身份证号：{{ walletData.card_number }}</p>
      </a-card>
      <a-card size="small" hoverable>
        <p>支付宝账号：{{ walletData.alipay_account }}</p>
      </a-card>
      <a-card size="small" hoverable>
        <p>支付宝姓名：{{ walletData.alipay_name }}</p>
      </a-card>
    </div>
  </a-modal>
</template>
<script setup>
  import { toRefs } from "vue";
  import type { WalletData } from "@/types/index";
  const props = withDefaults(
    defineProps<{
      visible: Boolean;
      walletData: WalletData;
    }>(),
    {},
  );

  const { visible, walletData } = toRefs(props);

  // 关闭弹窗
  const emits = defineEmits(["closeDialog"]);
  const closeDialogFn = (rest: boolean = false) => {
    emits("closeDialog", "visibleStatus", rest);
  };
</script>
<style scoped>
  @import "SigningInfo.less";
</style>