经验分享
ant-design-vue弹窗组件关不掉?
ant-design-vue弹窗组件关不掉?vue版本引起的坑,ant-design-vue,pinia版本问题
2024-07-11 09:34:46
12

事情是这样的:

vite + vue3 + typescript + ant-design-vue 技术栈的项目中,使用 Modal.confirm() 打开一个询问弹框,发现点击取消按钮无效,就直接把文档源码搬过来,发现也无效,开始了排查问题之路。


网上各种说是因为 vue 版本和 ant-design-vue 版本不兼容,vue 必须在 3.4 以下,而我 package.json 中声明的 vue^3.2.25 版本,我寻思我是 3.2.25 也没有是 3.4.x 呀。

后来我翻了翻 package-lock.json 发现一件大事,这里面确实有 3.4.x 版本的 vue,百度来百度去,最后锁定如下两个知识点:

  1. 版本号以 ^ 开头,如:^3.2.25 表示会安装符合当前大版本的最新版本,也就是只要是 3.x 就可以,所以最新版是 3.4.x
  2. 版本号以 ~ 开头,如:~3.2.25 表示会安装符合当前小版本的最新版本,也就是只要是 3.2.x 就可以

我这里需要锁定他是 3.2.25,直接不加任何符号。

当我安装依赖时,又开始报错,我的 pinia^2.0.30 版本,根据报错指引,发现该版本的 pinia 依赖于 vue2.6.x 或者 3.3.0,我这里是 vue3 项目,所以将 vue 版本锁定在 3.3.0

然后再次安装依赖 npm install,没有报错了,package-lock.json 中的 vue 版本也是 3.3.0ant-design-vueModal.confirm() 方法也可以成功关闭了。