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

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）和补丁版本的更新。