惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The GitHub Blog
The GitHub Blog
博客园 - 三生石上(FineUI控件)
V
V2EX
博客园 - 司徒正美
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tailwind CSS Blog
Last Week in AI
Last Week in AI
雷峰网
雷峰网
月光博客
月光博客
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Apple Machine Learning Research
Apple Machine Learning Research
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
S
SegmentFault 最新的问题
美团技术团队
Hugging Face - Blog
Hugging Face - Blog
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享
爱范儿
爱范儿
博客园 - 聂微东
量子位
J
Java Code Geeks
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Vercel News
Vercel News

韩小韩博客

你还在用真实邮箱注册网站?等等,你真的想清楚了吗? IPFS星际文件系统 最新二合一收款码 - 物理合并版 从Hexo到Astro博客1分钟迁移指南 Astro 添加 Waline 评论组件 腾讯云 EdgeOne Pages 实测对比:能否成为国内开发者的 Cloudflare Pages 最佳平替? Astro 中使用 Lenis 增加鼠标滚动阻尼感 一组手机和电脑动态壁纸分享【分享】 Astro 添加 Twikoo 评论组件 Astro主题-优雅的vhAstro-Theme【使用文档】 Fetch的GET、POST简单HTTP请求封装 一些实拍的手机壁纸 大理And威海【图】 很喜欢西湖的水【转自:狮子狮子鱼】 Tarot-塔罗牌占卜 Web Watermark 图片添加水印在线小助手 HanAnalytics访问分析Web统计托管于(Cloudflare Pages) 基于AI的微博动态心情分析 阿里云免费用9年ecs教程【适合轻量化服务如frp】 Cloudflare优选IP➕DnsPod的DDNS自动切换 混沌神器Clash全家桶 卷王都在用的变态休息法 NodeJs文本相似度去重脚本 骤雨重山无限存储图床托管于(Cloudflare Pages) 分享好看的天空和云(长期更新) Typecho转到Hexo(主题由Typecho-Joe-Theme转Butterfly主题) Typecho评论导出为Hexo的Valine、Twikoo等评论所支持的JSON文件 Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题 拼夕夕快速提现100元攻略 2024 平安喜乐
Ant Design Vue 4.0 a-modal弹窗组件封装
.𝙃𝙖𝙣 · 2026-04-11 · via 韩小韩博客

avatar

.𝙃𝙖𝙣

一点 0分钟

Code

父组件(部分)

<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>
Vue Ant Design