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>