【Ant Design of Vue】Modal.confirm无法关闭的bug

一、问题

在使用 Ant Design Vue 的 Modal.confirm 确认框时,出现了点击取消和确定后 Modal.confirm 确认框无法关闭的问题

在这里插入图片描述

二、代码

代码完全是 copy 的官网的代码,但是 copy 到本地后就会出现上述问题

<template><a-button @click="showConfirm">Confirm</a-button>
</template>
<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode, defineComponent } from 'vue';
import { Modal } from 'ant-design-vue';
export default defineComponent({setup() {const showConfirm = () => {Modal.confirm({title: 'Do you Want to delete these items?',icon: createVNode(ExclamationCircleOutlined),content: createVNode('div', { style: 'color:red;' }, 'Some descriptions'),onOk() {console.log('OK');},onCancel() {console.log('Cancel');},class: 'test',});};return {showConfirm,};},
});
</script>

三、解决方案

出现该问题的原因是因为:vue更新到 3.4.x 版本之后,某些 API 和 Ant Design Vue 不兼容

本人之前使用的版本是:

  • vue 3.4.7
  • ant-design-vue 3.2.20

解决方案:将vue版本修改并锁定为 3.2.20
在这里插入图片描述

请添加图片描述

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

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

相关文章

Unity3D代码混淆方案详解

背景 Unity引擎使用Mono运行时&#xff0c;而C#语言易受反编译影响&#xff0c;存在代码泄露风险。本文通过《QQ乐团》项目实践&#xff0c;提出一种适用于Unity引擎的代码混淆方案&#xff0c;以保护代码逻辑。 引言 在Unity引擎下&#xff0c;为了防止代码被轻易反编译&a…

基于LLM大模型的结构化数据批量提取

在当今世界&#xff0c;越来越多的组织致力于数据驱动的决策。 然而&#xff0c;他们通常面临着从非结构化文本数据&#xff08;例如客户评论或反馈&#xff09;中提取有价值的见解的挑战。 这篇文章是为想要使用非结构化数据获得有用见解的数据科学家、分析师和决策者量身定制…

【CSP】2023年12月真题练习(更新到202312-2)

试题编号&#xff1a;202312-1试题名称&#xff1a;仓库规划时间限制&#xff1a;1.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 西西艾弗岛上共有 n 个仓库&#xff0c;依次编号为 1⋯n。每个仓库均有一个 m 维向量的位置编码&#xff0c;用来表示仓库间的物…

【探索C++容器:vector的使用和模拟实现】

【本节目标】 1.vector的介绍及使用 2.vector深度剖析及模拟实现 1.vector的介绍及使用 1.1 vector的介绍 vertor文档介绍 1. vector是表示可变大小数组的序列容器。2. 就像数组一样&#xff0c;vector也采用连续存储空间来存储元素。也就是意味着可以采用下标对vector的元…

【控制篇 / 分流】(7.4) ❀ 03. 对国内和国际IP网段访问进行分流 ❀ FortiGate 防火墙

【简介】公司有两条宽带用来上网&#xff0c;一条电信&#xff0c;一条IPLS国际专线&#xff0c;由于IPLS仅有2M&#xff0c;且价格昂贵&#xff0c;领导要求&#xff0c;访问国内IP走电信&#xff0c;国际IP走IPLS&#xff0c;那么应该怎么做&#xff1f; 国内IP地址组 我们已…

4种方法用Python批量实现多Excel多Sheet合并

目录 方法一&#xff1a;使用pandas库 方法二&#xff1a;使用openpyxl库 方法三&#xff1a;使用xlrd和xlwt库 方法四&#xff1a;使用os和glob库 在数据处理中&#xff0c;经常需要将多个Excel文件中的多个工作表进行合并。以下介绍了4种方法&#xff0c;使用Python批量实…

sql中的explain关键字用法

在SQL中&#xff0c;使用EXPLAIN关键字可以获取查询的执行计划&#xff0c;以便进行性能优化和查询调优。执行计划提供了关于查询操作的详细信息&#xff0c;涵盖了多个表头字段&#xff0c;每个字段都提供了特定的信息。以下是explain表头字段解释&#xff1a; id&#xff1…

【NCRE 二级Java语言程序设计04】二级Java考试应用软件使用

目录 前言一、软件介绍和下载1.软件介绍和下载2.下载软件3.下载使用说明和示例教程 二、本地练习环境搭建1.解压启动2.自建Java应用程序3.Hello入门程序 三、NetBeans一般配置1.代码模板2.字体和颜色3.快捷键映射 总结 前言 &#x1f4dc;本专栏主要是分享自己备考全国计算机二…

以某轧钢厂为例浅谈电能管理系统

摘要&#xff1a;结合某轧钢厂的现状和电能管理软件的优势应用&#xff0c;在节能降耗方面利用电能管理软件对轧钢厂电能损耗进行实时监控&#xff0c;为实现能源优化配置和节能降耗管理提供了大量数据&#xff0c;从而为大型能耗企业的节能降耗实施奠定了基础。 关键词&#x…

k8s的对外服务ingress

1、service的作用体现在两个方面 &#xff08;1&#xff09;集群内部&#xff1a;不断跟踪pod的变化&#xff0c;更新deployment中的pod对象&#xff0c;基于pod的ip地址不断变化的一种服务发现机制 &#xff08;2&#xff09;集群外部&#xff1a;类似于负载均衡器&#xff…

MongoDB Compass当前版本及历史版本下载安装

mongoDB compass 当前版本下载 官网 https://www.mongodb.com/try/download/compass 官网下载一般只能下载最新版本。 github https://github.com/mongodb-js/compass MongoDB Compass与MongoDB的版本对应关系 MongoDB CompassMongoDB1.9.12MongoDB 2.6.11 Community

conda install命令无法安装pytorch

由于网络问题&#xff0c;直接采用conda install命令可能无法直接下载对应的cuda包。 方法一&#xff1a;采用pip命令替代 步骤1&#xff1a;切换pip的源为国内源&#xff1a; 若只是临时切换&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-p…

appium之联动pycharm

前置条件&#xff1a; 1.java环境安装好了 2.android-sdk安装好&#xff08;uiautomatorviewer 也可以把这个启动起来&#xff09; 3.appium安装好 4.adb devices查看下设备是否连接 pycharm入门代码--固定写法 from appium import webdriver# 定义字典变量 desired_caps …

ONLYOFFICE:开源、免费、安全,打造定制化办公平台的最佳选择

文章目录 写在前面ONLYOFFICE是什么&#xff1f;ONLYOFFICE的惊艳之处齐全的插件&#xff0c;助你锦上添花部署一款自己的安全可靠的办公平台写在最后 写在前面 说起 Office 办公软件&#xff0c;我想大家最常用的应该就是微软的 Microsoft Office 以及国产的 WPS Office。两款…

C++设计模式(李建忠)笔记4(完结)

C设计模式&#xff08;李建忠&#xff09; 本文是学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。 参考链接 Youtube: C设计模式 Gtihub源码与PPT&#xff1a;https://github.com/ZachL1/Bilibili-plus 豆瓣: 设计模式–可复用面向对象软件的基础 总结23种设计模式…

Qt应用开发(安卓篇)——Linux下Qt15.5.2配置Android

目录 一、前言 二、Qt安装 三&#xff1a;JDK安装 四&#xff1a;安装SDK&#xff0c;NDK 五、其他事项 六、新建项目 一、前言 看网上教程&#xff0c;多数是windows环境下的&#xff0c;配置也很简单&#xff0c;想不到自己配置的时候却遇到很多问题&#xff0c;传了一…

给WordPress网站增加一个带时间的led广告牌

WordPress 后台》外观》小工具》自定义html》添加到合适位置 其他系统可自行添加合适位置 <style type"text/css">.studytextgzbox {background: #F9F9F9; border: 1px solid #999999;margin: 1px;text-align:center; float: left;line-height: 28px;hei…

2018年认证杯SPSSPRO杯数学建模B题(第一阶段)动态模糊图像全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 B题 动态模糊图像 原题再现&#xff1a; 人眼由于存在视觉暂留效应&#xff0c;所以看运动的物体时&#xff0c;看到的每一帧画面都包含了一段时间内 (大约 1/24 秒) 的运动过程&#xff0c;所以这帧画面事实上是模糊的。对电影的截图来说&…

【STM32】STM32学习笔记-MPU6050简介(32)

00. 目录 文章目录 00. 目录01. MPU6050简介02. MPU6050参数03. MPU6050硬件电路04. MPU6050框图05. MPU6050常用寄存器06. 附录 01. MPU6050简介 •MPU6050是一个6轴姿态传感器&#xff0c;可以测量芯片自身X、Y、Z轴的加速度、角速度参数&#xff0c;通过数据融合&#xff0…

STM32标准库开发——USART串口协议

通信接口 通信的目的:将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统通信协议:制定通信的规则&#xff0c;通信双方按照协议规则进行数据收发 差分电平&#xff08;Differential Voltage Level&#xff09;是指用两个相对的电平来表示信号的电压差异。它是通过将…