Ant Design Vue 弹窗无法关闭
Ant Design Vue使用Modal模块,激活对话框后无法关闭,详解此BUG是如何产生的以及它对应的解决方法。
Ant Design Vue 弹窗无法关闭
前因:
之前在某次AntDesign更新后,在激活Model对话框后,点击关闭发现无法正常关闭,各项API在尝试后均无法关闭,控制台输出报错“isFucntion is not function”,一番查找无果后,前往GITHUB查询有无issues记录,在issues中找到多条有关该错的提交,并获取到解决方法,就在前天我朋友在问及我此事时,发现貌似Ant官方并不打算管它了,所以在此把解决办法和原因记录下来。
问题产生的原因:
博主使用的Ant版本是3.2.20,其余版本暂未测试,在项目的node_modules模块中的Ant Design包内的package.json配置中,有引入Vue,它的配置是vue: "^3.2.0",而^的含义是:引入最近的一个大版本,它覆盖了项目根目录下的package.json中定义的vue版本,自动引入了vue的最新版,在vue的最新版中由于部分API的变动,导致Ant关闭弹窗的方法失效从而引发了报错。
Ant配置截图:

Vue引入最新的版本截图:

解决办法:
对Vue降级,锁死Vue版本,降级至3.4以下,先删除node_modules,在修改项目根目录下的package.json文件中的Vue配置,把^去掉或修改为=,在重新cnpm i
{
// "vue": "^3.3.2",
"vue": "=3.3.2",
"vue": "3.3.2",
}
如有问题欢迎在下方留言讨论,感谢您的反馈,如本文对您有所帮助,请点个赞?在走吧~
