Ant Design Vue 使用 Modal.confirm() 方式点击确认或取消无法关闭

目录

  • [1. 问题复现 & 原因](#1. 问题复现 & 原因)
  • [2. 解决方案](#2. 解决方案)
  • 3.依赖包版本符号说明
    • [3.1 版本符号 ^](#3.1 版本符号 ^)
    • [3.2 版本符号 ~](#3.2 版本符号 ~)

1. 问题复现 & 原因

如果是通过下面的静态方法打开的话会出现这样的问题:

js 复制代码
// 有问题的代码
Modal.confirm({
	title: '提示',
	content: '操作未保存,是否保存',
	onOk () {
	 // ....
	},
	onCancel () {
	 // ....
	}
})

不是通过静态方法(JS编码)打开的的方式是没有问题的:

html 复制代码
<!--可以正常使用的代码-->
 <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
     <p>Some contents...</p>
     <p>Some contents...</p>
     <p>Some contents...</p>
</a-modal>

【原因】 问题的原因是一个小小的 bug,可以参考 Github 上的 Issue: https://github.com/vueComponent/ant-design-vue/issues/7257

2. 解决方案

其实不光 vue 3.4.x 版本会出问题;使用 ant-design-vu 3.2.20 + vue 3.2.0 也会出现该问题。

解决方法 :按照 Issue 中的方案,将 vue 的版本固定为 3.3.x 即可:

json 复制代码
// 出现问题的依赖
"dependencies": {
	"ant-design-vue": "^3.2.20",
	"vue": "^3.2.0",
}
json 复制代码
// 可以正常使用使用的依赖
"dependencies": {
	"ant-design-vue": "^3.2.20",
	"vue": "~3.3.13",
}

3.依赖包版本符号说明

后续会单独出一篇文章来详细说明 package.json 中依赖的版本关系,这里只针对上面解决方案中用到的 ^~ 简单说明一下。

版本号定义:x.x.x

x x x
英文 Major Version Minor Version Patch Version
中文 主版本号 次版本号 修订(补丁)版本号
举例 3 2 20

3.1 版本符号 ^

^(Caret):代表"向后兼容的更新";会匹配同一主版本号的最新版本。

💪 规则:

  • 对于 1.0.0 及以上版本:更新小版本(Minor)和补丁版本(Patch)。
  • 对于 0.x.x 版本:比较特殊,只更新补丁版本。

💪 示例:

  • "^1.2.3" 会匹配 1.x.x 中最新的 1.2.3 及以上版本(例如,1.2.4、1.3.0),但不会匹配 2.0.0。
  • "^0.2.3" 会匹配 0.2.x 中的最新版本,但不会匹配 0.3.0。

3.2 版本符号 ~

~ (Tilde) :代表"最小改动";只会匹配指定的次版本号(Minor)和补丁版本的更新。

💪 示例:

  • "~1.2.3" 会匹配 1.2.x 中最新的版本(例如,1.2.4),但不会匹配 1.3.0。
  • "~0.2.3" 会匹配 0.2.x 中的最新版本(例如,0.2.4),但不会匹配 0.3.0。
相关推荐
riuphan3 分钟前
JavaScript 类型判断完全指南
前端·javascript
Hilaku10 分钟前
前端工程师最终会变成 AI工程师?
前端·javascript·程序员
flyinmind19 分钟前
Java环境与Android环境中使用QuickJS
java·开发语言·javascript·quickjs
如烟花的信页33 分钟前
数美滑块逆向分析
javascript·爬虫·python·js逆向
子琦啊40 分钟前
华为 OD 2026年5月笔试题解析
javascript·华为
无风听海1 小时前
Promise 与 Async Await 深度解析
前端·javascript
lpd_lt1 小时前
服务端类vue等页面AI测试方向
前端·vue.js·人工智能
橘子味的冰淇淋~1 小时前
优化前端性能之从“全局引入”改为“按需引入”
前端·javascript·vue.js
Vennn2 小时前
Android自动化:使用 Web 方式实现某音未读消息检查与采集
前端·javascript·vue.js
Smilezyl2 小时前
为了搞懂 AI Agent,我用 6000 行 JS 代码手搓了一个零依赖的 Coding Agent
前端·javascript·github