小元
博客
详情文字在这里缓缓展开
静候你翻开这一页

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配置截图:

   1715236013823.png


   Vue引入最新的版本截图:

   1715236177983.png

   

   解决办法:

       对Vue降级,锁死Vue版本,降级至3.4以下,先删除node_modules,在修改项目根目录下的package.json文件中的Vue配置,把^去掉或修改为=,在重新cnpm i

    {
        // "vue": "^3.3.2", 
        "vue": "=3.3.2",
        "vue": "3.3.2",
    }

 

如有问题欢迎在下方留言讨论,感谢您的反馈,如本文对您有所帮助,请点个赞?在走吧~

渝ICP备2024031078号-1
本网站一切内容不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
如无意中侵犯了企业或个人的知识产权等,请及时通过电子邮件(1102905617@qq.com)告知我,本网站将会给予删除。
最新公告
😊访客你好,很高兴你的到来,本博客仍在建设中,还有些许功能尚在开发中,最后祝你在此能有所收获。
💥小元博客第三代自2025年9月上线以来,2026/08/09日迎来了它的第三次更新本次更新内容如下:
1. 文章详情页样式变更,由原来的弹窗改为单独的页面。
2. 使用Nuxt对项目进行了SEO优化,优化了搜索引擎的抓取和索引。
3. 对验签进行了优化,降低了请求被误触发拦截的概率。
4. 移动端也正在稳步推进中,在不久的将来会与大家见面。
5. 修复了首页黄历节日不显示的问题,以及其它bug的修复。