1. 问题复现 & 原因
如果是通过下面的静态方法打开的话会出现这样的问题:
// 有问题的代码
Modal.confirm({
title: '提示',
content: '操作未保存,是否保存',
onOk () {
// ....
},
onCancel () {
// ....
}
})
不是通过静态方法(JS编码)打开的的方式是没有问题的:
<!--可以正常使用的代码-->
<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
即可:
// 出现问题的依赖
"dependencies": {
"ant-design-vue": "^3.2.20",
"vue": "^3.2.0",
}
// 可以正常使用使用的依赖
"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。