Modal.method() 不显示头部的问题
ant-design中的Modal组件有两种用法:
第一种是用标签:<a-modal></a-modal>
第二种是用Api:Modal.info、Modal.warning、Modal.confirm......
一开始项目中这两种用法是混用的,后面UI改造,需要统一样式,步骤如下:
1、封装全局弹窗组件 src/components/ConfirmModal/index.vue
<template><a-modalv-model:visible="visible":title="props.title"centeredwidth="400px":footer="null":keyboard="false":maskClosable="false"destroyOnClose@cancel="cancel"><div v-if="vNode" ref="contentRef" class="text-align-c mt-16"></div><div v-else class="text-align-c mt-16">{{ description }}</div><footer class="text-align-c mb-24 mt-40"><template v-if="(callType === 'method' && footerCancelOption) || callType === 'component'"><a-button v-bind="footerCancelOption?.props" class="cancel-btn long-btn" @click="cancel">{{ footerCancelOption?.text || '取消' }}</a-button></template><template v-if="(callType === 'method' && footerConfirmOption) || callType === 'component'"><a-button v-bind="footerConfirmOption?.props" class="confirm-btn long-btn" type="primary" :loading="btnLoading" @click="confirm">{{ footerConfirmOption?.text || '确认' }}</a-button></template></footer></a-modal>
</template>
<script setup>
import { ref, render, nextTick } from 'vue'
import { Button, Modal } from 'ant-design-vue'const AButton = Button
const AModal = Modalconst emits = defineEmits(['confirm', 'cancel'])
const props = defineProps({title: {type: String,default: '提示'},callType: {type: String,default: 'component'},vNode: {type: Object,default: null},footerCancelOption: {type: Object,default: null},footerConfirmOption: {type: Object,default: null}
})const contentRef = ref()
const visible = ref(false)
const description = ref('')
const btnLoading = ref(false)const openModel = value => {description.value = valuevisible.value = truenextTick(() => {if (props.vNode) {render(props.vNode, contentRef.value)}})
}const closeModel = () => {btnLoading.value = falsevisible.value = false
}const cancel = () => {closeModel()emits('cancel')
}const confirm = () => {emits('confirm')
}defineExpose({openModel,closeModel,cancel,btnLoading
})
</script>
<style lang="less" scoped>
.confirm-btn {margin-left: 0;
}
.cancel-btn + .confirm-btn {margin-left: 40px;
}
</style>
2、同级目录下新建js文件,调用弹窗组件 src/components/ConfirmModal/index.js
import { createApp } from 'vue'
import ConfirmModal from './index.vue'export const showConfirmModal = option => {const div = document.createElement('div')document.body.appendChild(div)const app = createApp(ConfirmModal, {callType: 'method',vNode: option.vNode,footerCancelOption: option.footerCancelOption,footerConfirmOption: option.footerConfirmOption,onCancel: () => {option?.footerCancelOption?.onCancel && option?.footerCancelOption?.onCancel()},onConfirm: () => {option?.footerConfirmOption?.onConfirm && option?.footerConfirmOption?.onConfirm()}})const vm = app.mount(div)vm.openModel()return { app, vm }
}
3、在需要调用弹窗组件的js文件中引用 xxx.js
import { ref, h } from 'vue'
import { showConfirmModal } from '@/components/ConfirmModal/index.js'// 强制登录提示
const { vm } = showConfirmModal({vNode: h('div', { style: { color: '#333' } }, '你的账号在另一台设备登录,你将被迫下线,请确认密码是否泄露!'),footerConfirmOption: {onConfirm: () => {window.location.reload()vm.closeModel()}}
})
4、效果图

相关文章:
Modal.method() 不显示头部的问题
ant-design中的Modal组件有两种用法: 第一种是用标签:<a-modal></a-modal> 第二种是用Api:Modal.info、Modal.warning、Modal.confirm...... 一开始项目中这两种用法是混用的,后面UI改造,需要统一样式&…...
Java中的内部类及其用途
一、技术难点 在Java中,内部类是一个定义在另一个类内部的类。这种嵌套的结构带来了一些技术上的难点和挑战: 访问控制:内部类可以直接访问外部类的所有成员(包括私有成员),但外部类不能直接访问内部类的…...
堆(建堆算法,堆排序)
目录 一.什么是堆? 1.堆 2.堆的储存 二.堆结构的创建 1.头文件的声明: 2.向上调整 3.向下调整 4.源码: 三.建堆算法 1.向上建堆法 2.向下建堆法 四.堆排序 五.在文件中Top出最小的K个数 一.什么是堆? 1.堆 堆就…...
Linux内核重置root密码
Ubuntu 首先重新启动Ubuntu系统,然后快速按下shift键,以调出grub启动菜单在这里我们选择第二个(Ubuntu高级选项),选中后按下Enter键 选择最高的Linux内核版本所对应的recovery mode模式,按e键编辑启动项 在…...
LaTex安装及配置(Windows)
LaTex安装及配置(Windows) 安装环境安装texlive下载texlive安装 编辑器安装texstudio下载texstudio安装 环境配置 使用第一个LaTex文档新建文件编程查看results 安装 环境安装 texlive下载 镜像清华源下载地址:https://mirrors.tuna.tsing…...
这才是满分毕业答辩PPT!
这才是满分毕业答辩PPT! 2024年 毕业答辩论文指南 创新 正式 高效 正值毕业季,是不是很多同学,非常头疼如何进行论文答辩? 要想导师满意,顺利毕业,那么手里必须有份优秀的答辩PPT。这将是你的秘密武器&…...
【字典树(前缀树) 字符串】2416. 字符串的前缀分数和
本文涉及知识点 字典树(前缀树) 字符串 LeetCode 2416. 字符串的前缀分数和 给你一个长度为 n 的数组 words ,该数组由 非空 字符串组成。 定义字符串 word 的 分数 等于以 word 作为 前缀 的 words[i] 的数目。 例如,如果 words [“a”,…...
X-CSV-Reader:一个使用Rust实现CSV命令行读取器
🎈效果演示 ⚡️快速上手 依赖导入: cargo add csv读取实现: use std::error::Error; use std::fs::File; use std::path::Path;fn read_csv<P: AsRef<Path>>(filename: P) -> Result<(), Box<dyn Error>> {le…...
集成ECharts到若依框架:原理与使用方法详解
ECharts 是一个强大的开源数据可视化库,基于 JavaScript,能够创建丰富多彩的图表和交互数据展示。结合若依框架(RuoYi),我们可以非常方便地将 ECharts 集成到系统中,实现数据的可视化展示。本文将详细介绍 …...
【机器学习】——线性模型
💻博主现有专栏: C51单片机(STC89C516),c语言,c,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux…...
最全的Redis常用命令
Redis是一个开源的内存数据结构存储系统,用作数据库、缓存和消息代理。它支持多种类型的数据结构,如字符串(strings)、哈希(hashes)、列表(lists)、集合(sets)…...
sourcetree推送到git上面
官网:Sourcetree | Free Git GUI for Mac and Windows 下载到1次提交 下载后打开 点击跳过 下一步 名字邮箱 点击clone 把自己要上传的代码粘贴到里面去 返回点击远程->点击暂存所有 加载完毕后,输入提交内容提交 提交完成了 2次提交 把文件夹内的…...
勒索病毒的策略与建议
随着网络技术的快速发展,勒索病毒攻击成为全球范围内日益严重的网络安全威胁。勒索病毒通过加密用户文件或锁定系统来勒索赎金,给个人和企业带来了巨大的损失。因此,了解如何应对勒索病毒攻击至关重要。本文将概述一些有效的防范措施和应对策…...
doxygen 1.11.0 使用详解(十四)——输出格式
目录 HTMLLATEXMan pagesRTFXMLDocBookCompiled HTML Help (a.k.a. Windows 98 help)Qt Compressed Help (.qch)Eclipse HelpXCode DocSetsPostScriptPDF The following output formats are directly supported by doxygen: HTML Generated if GENERATE_HTML is set to YES i…...
java list<AnalystEducationDO> 转成List<AnalystEducationRespVO>两个对象的属性一样
如果AnalystEducationDO和AnalystEducationRespVO两个类的属性完全相同,且遵循Java Bean的命名规范(即具有相应的getter和setter方法),你可以利用一些库来简化转换过程,比如Apache BeanUtils或Spring Framework的BeanU…...
[Algorihm][简单多状态DP问题][买卖股票的最佳时机含冷冻期][买卖股票的最佳时机含手续费]详细讲解
目录 1.买卖股票的最佳时机含冷冻期1.题目链接买卖股票的最佳时机含冷冻期2.算法原理详解3.代码实现 2.买卖股票的最佳时机含手续费1.题目链接2.算法原理详解3.代码实现 1.买卖股票的最佳时机含冷冻期 1.题目链接 买卖股票的最佳时机含冷冻期 2.算法原理详解 思路ÿ…...
微服务:利用RestTemplate实现远程调用
打算系统学习一下微服务知识,从今天开始记录。 远程调用 调用order接口,查询。 由于实现还未封装用户信息,所以为null。 下面我们来使用远程调用用户服务的接口,然后封装一下用户信息返回即可。 流程图 配置类中注入RestTe…...
【Linux】TCP的三次握手和四次挥手
三次握手 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。注意!三次握手只是用来建立连接用的,和TCP可靠稳定没有关系,TCP的可靠是通过重传和检错等机制实现的。 默认创建一个socket后ÿ…...
爬山算法全解析:掌握优化技巧,攀登技术高峰!
一、引言 爬山算法是一种局部搜索算法,它基于当前解的邻域中进行搜索,通过比较当前解与邻域解的优劣来更新当前解,从而逐步逼近最优解。本文将对爬山算法进行详细的介绍。 二、爬山算法简介 爬山算法是一种基于贪心策略的优化算法ÿ…...
使用 Ollama框架 下载和使用 Llama3 AI大模型的完整指南
🏡作者主页:点击! 🤖AI大模型部署与应用专栏:点击! ⏰️创作时间:2024年5月24日20点59分 🀄️文章质量:96分 目录 💥Ollama介绍 主要特点 主要优点 应…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
