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。
相关推荐
RFCEO8 分钟前
网页三剑客HTML、CSS、JavaScript 三者的关系详解
javascript·css·html·网页编程
郑州光合科技余经理11 分钟前
同城O2O系统架构解析:中台化如何赋能本地生活服务
java·开发语言·javascript·人工智能·系统架构·php·生活
琹箐14 分钟前
AntDesign AFormItem中表单元素嵌套及校验
前端·javascript·vue.js
梦65019 分钟前
VUE3简单实现九宫格点击抽奖
前端·javascript·vue.js
源码获取_wx:Fegn08951 小时前
基于springboot + vue校园跑腿系统
vue.js·spring boot·后端·spring·课程设计
摘星编程1 小时前
React Native for OpenHarmony 实战:Navigation 导航详解
javascript·react native·react.js
光影少年1 小时前
next.js与纯react区别
前端·javascript·react.js
2501_944711431 小时前
理解 React 自定义 Hook:不只是“封装”,更是思维方式的转变
前端·javascript·react.js
摘星编程1 小时前
React Native for OpenHarmony 实战:ReactNavigation 导航库详解
javascript·react native·react.js
PieroPc1 小时前
Html+css+js 写一个销售单据数据收集工具,会用到小米相机文档功能、NasCab、豆包Ai作为辅助
javascript·css·html