解决Ant Design Vue使用Modal对话框无法关闭的问题《操作Dom不需要降低版本》

一、问题
Ant Design Vue 使用 Modal.confirm 之类的静态方法 发现无法关闭弹窗,网上搜了好多都是降低版本,并锁定版本,但是目前在做的项目对UI样式要求很高,降低或者升级版本会导致部分样式不符合当前的UI规范,于是通过操作Dom的方式解决。

二、解决方法

// 静态方法打开 Modal 弹窗
Modal.confirm({title:  'This is a success message',icon: createVNode(InfoCircleFilled),content: 'some messages...some messages...',okText: 'yes',cancelText: 'no',onOk() {// 操作dom的函数 用于关闭弹窗closeMyFn()console.log('onOk');},onCancel() {closeMyFn()console.log('onCancel');},});timer.value = setTimeout(()=> {// 打开弹窗时给右上角的 X 绑定点击事件clickX()},200)// 关闭弹窗
const closeMyFn= async () => {let dom = document.getElementsByClassName('ems-front-modal-body')[0]let domRoot = document.getElementsByClassName('ems-front-modal-root')[0]dom.remove()domRoot.remove()
}// 点击 Modal 右上角的 X
const clickX = async ()=> {modalXDom.value = document.getElementsByClassName('ems-front-modal-close')[0]modalXDom.value.addEventListener('click',()=>{// 点击右上角的 X 调用关闭弹窗的方法closeMyFn()})
}// 卸载的时候清空定时器和绑定的点击事件
onUnmounted(() => {modalXDom.value && modalCloseDom.value.removeEventListener('click', () => {})timer.value && clearTimeout(timer.value)
})

三、注意
如果一个页面既有 Modal.confirm (静态方法点击的弹窗) 又有 < a-modal >类的弹窗需改给 < a-modal > 加 v-if 例如

<a-modalv-if="visible"v-model:visible="visible"title="标题"@ok="handleOk">
</a-modal>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/429264.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UML图之构件图例题

答案&#xff1a;C 知识点&#xff1a;构件图描述一个封装的类和它的接口&#xff0c;端口&#xff0c;以及由内嵌的构件和连接件构成的内部结构。 构件图是类图的变体 构件图又叫组件图

24年蓝桥杯及攻防世界赛题-MISC-1

2 What-is-this AZADI TOWER 3 Avatar 题目 一个恐怖份子上传了这张照片到社交网络。里面藏了什么信息?隐藏内容即flag 解题 ┌──(holyeyes㉿kali2023)-[~/Misc/tool-misc/outguess] └─$ outguess -r 035bfaa85410429495786d8ea6ecd296.jpg flag1.txt Reading 035bf…

掌握 Spring:从新手到高手的常见问题汇总

一提起Spring&#xff0c;总感觉有太多知识&#xff0c;无法详尽&#xff0c;有些基础理解就先不说了&#xff0c;相信大家都已经用过Spring了 下面简单针对常见Spring面试题做些回答 核心特性 IOC容器spring事件资源管理国际化校验数据绑定类型转换spirng表达式面向切面编程……

二叉树(二)深度遍历和广度遍历

一、层序遍历 广度优先搜索&#xff1a;使用队列&#xff0c;先进先出 模板&#xff1a; 1、定义返回的result和用于辅助的队列 2、队列初始化&#xff1a; root非空时进队 3、遍历整个队列&#xff1a;大循环while(!que.empty()) 记录每层的size以及装每层结果的变量&a…

边缘智能-大模型架构初探

R2Cloud接口 机器人注册 请求和应答 注册是一个简单的 HTTP 接口&#xff0c;根据机器人/用户信息注册&#xff0c;创建一个新机器人。 请求 URL URLhttp://ip/robot/regTypePOSTHTTP Version1.1Content-Typeapplication/json 请求参数 Param含义Rule是否必须缺省roboti…

2、StarGAN V2

2、StarGAN V2 StarGAN 论文链接&#xff1a;StarGAN StarGAN V2 论文链接&#xff1a;StarGAN V2 在介绍StarGAN V2之前&#xff0c;我们先对StarGAN有一定的了解&#xff0c;StarGAN V2只是在StarGAN的基础上做出了改进&#xff0c;基本的架构是没有变的&#xff0c;只是将…

(11)(2.1.2) DShot ESCs(二)

文章目录 前言 3 配置伺服功能 4 检查RC横幅 5 参数说明 前言 DShot 是一种数字 ESC 协议&#xff0c;它允许快速、高分辨率的数字通信&#xff0c;可以改善飞行器控制&#xff0c;这在多旋翼和 quadplane 应用中特别有用。 3 配置伺服功能 如上所述&#xff0c;如果使用…

《粮油与饲料科技》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答 问&#xff1a;《粮油与饲料科技》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的第一批认定 学术期刊。 问&#xff1a;《粮油与饲料科技》级别&#xff1f; 答&#xff1a;省级。主管单位&#xff1a;中文天地出版传媒集团股份有限公司…

Apache ZooKeeper 及 Curator 使用总结

1. 下载 官网地址&#xff1a;Apache ZooKeeper 点击下载按钮 选择对应的版本进行下载 2. 使用 1、解压 tar -zxf apache-zookeeper-3.9.2-bin.tar.gz2、复制配置文件&#xff0c;有一个示例配置文件 conf/zoo_sample.cfg&#xff0c;此文件不能生效&#xff0c;需要名称为…

C#和数据库高级:继承与多态

文章目录 一、继承的基本使用继承的概念&#xff1a;继承的特点&#xff1a;为什么使用继承&#xff1f; 二、继承的关键字1、this关键字2、base关键字3、Protected关键字4、子类调用父类的构造函数的总结&#xff1a; 三、继承的特性继承的传递性&#xff1a;继承的单根性&…

【服务器入门】Linux系统基础知识

【服务器入门】Linux系统基础知识 远程登录与文件传输基础命令与文本编辑vi/vim使用shell脚本基本命令1、目录操作2、文件创建与删改3、文件连接与查看 参考 目前超算使用的系统以Linux系统为主&#xff0c;肯定需要了解一些相关知识。本博客就以本人运行WRF模型所需&#xff0…

Remix在SPA模式下,出现ErrorBoundary错误页加载Ant Design组件报错,不能加载样式的问题

Remix是一个既能做服务端渲染&#xff0c;又能做单页应用的框架&#xff0c;如果想做单页应用&#xff0c;又想学服务端渲染&#xff0c;使用Remix可以降低学习成本。最近&#xff0c;在学习Remix的过程中&#xff0c;遇到了在SPA模式下与Ant Design整合的问题。 我用Remix官网…

Godot游戏如何提升触感体验

在游戏世界中&#xff0c;触感体验至关重要&#xff0c;既能极大提升玩家沉浸感&#xff0c;让其深度融入游戏&#xff0c;在操作角色或与环境互动时&#xff0c;通过触感反馈获得身临其境的真实感&#xff08;比如动作游戏中角色攻击或受击时的振动反馈&#xff0c;能使玩家更…

花朵识别系统Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+模型训练

一、介绍 花朵识别系统。本系统采用Python作为主要编程语言&#xff0c;基于TensorFlow搭建ResNet50卷积神经网络算法模型&#xff0c;并基于前期收集到的5种常见的花朵数据集&#xff08;向日葵、玫瑰、蒲公英、郁金香、菊花&#xff09;进行处理后进行模型训练&#xff0c;最…

解决DockerDesktop启动redis后采用PowerShell终端操作

如图&#xff1a; 在启动redis容器后&#xff0c;会计入以下界面 &#xff1a; 在进入执行界面后如图&#xff1a; 是否会觉得界面过于单调&#xff0c;于是想到使用PowerShell来操作。 步骤如下&#xff1a; 这样就能使用PowerShell愉快地敲命令了&#xff08;颜值是第一生…

【stm32笔记】使用rtt-studio与stm32CubeMx联合创建项目

使用rtt-studio与stm32CubeMx联合创建项目 创建rt-thread项目 设置项目信息 在项目资源管理器中“右击“&#xff0c;创建RRT studio 项目 双击“RT-Thread 项目“。 选择MCU&#xff0c;设置UART&#xff0c;以及调试方式。添加项目名称&#xff0c;点击“完成“按钮。 …

Redis的主从模式、哨兵模式、集群模式

最近学习了一下这三种架构模式&#xff0c;这里记录一下&#xff0c;仅供参考 目录 一、主从架构 1、搭建方式 2、同步原理 3、优化策略&#xff1a; 4、总结&#xff1a; 二、哨兵架构 1、搭建哨兵集群 2、RedisTemplate如何使用哨兵模式 三、分片集群架构 1&#…

集成学习详细介绍

以下内容整理于&#xff1a; 斯图尔特.罗素, 人工智能.现代方法 第四版(张博雅等译)机器学习_温州大学_中国大学MOOC(慕课)XGBoost原理介绍------个人理解版_xgboost原理介绍 个人理解-CSDN博客 集成学习(ensemble)&#xff1a;选择一个由一系列假设h1, h2, …, hn构成的集合…

AI运动小程序开发常见问题集锦一

截止到现在写博文时&#xff0c;我们的AI运动识别小程序插件已经迭代了23个版本&#xff0c;成功应用于健身、体育、体测、AR互动等场景&#xff1b;为了让正在集成或者计划进行功能扩展优化的用户&#xff0c;少走弯路、投入更少的开发资源&#xff0c;我们归集了一部分集中的…

Redis数据结构之set

一.set集合特性 集合类型也是保存多个字符串类型的元素的&#xff0c;但和list列表不一样&#xff0c;集合中的元素是无序的&#xff0c;而且元素不能够重复&#xff0c;不仅支持增删查改&#xff0c;还支持交集并集等操作 二.相关命令 1.sadd sadd key members…… 咱们把…