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

父组件（部分）

<template>
    <div class="main">
        <a-button type="primary" ghost @click="dialogPanelStatus.signIngInfoStatus = true" >签约信息</a-button>
    </div>
    <!-- 签约信息 -->
    <SigningInfo
      :signIngInfoStatus="dialogPanelStatus.signIngInfoStatus"
      :walletData="walletData"
      @closeDialog="closeDialog"
    />
  </template>
  <script setup lang="ts">
  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 lang="less" scoped>
  @import 'Income.less';
  </style>

弹窗子组件

<template>
  <a-modal :open="visible" title="弹框" :footer="null" destroyOnClose :maskClosable="false"
    @cancel="closeDialogFn(false)">
    <div class="zb-info">
      <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 lang="ts">
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 lang="less" scoped>
@import 'SigningInfo.less';
</style>