Ant Design Vue 4.0 a-modal弹窗组件封装
25-04-07
slbcun
650℃
0
父组件(部分)
<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>