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

骤雨重山

发布于 2023-07-31 13:08:28

4090

发布于 2023-07-31 13:08:28

父组件（部分）

  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);
  };
  
  
  
  @import 'Income.less';

弹窗子组件

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);
};


@import 'SigningInfo.less';

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

ant