AntDesignVue 的弹窗组件关闭不了model.confirm 不关闭

于 2024-05-20 16:30:12 发布
阅读量456 收藏
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62273193/article/details/139068570
版权

问题描述：
AntDesignVue 的弹窗组件关闭不了model.confirm 不关闭
vue3 和 antdesignvue的项目
弹窗的突然就关闭不了，代码也没有修改，猜测是vue的问题，到处寻找
在这里插入图片描述

在github上找到了解决方法，参考

https://github.com/vueComponent/ant-design-vue/issues/7257

先查看node_modules里面的vue版本 ，果然是3.4xx版本，

自己动手解决，安装vue版本小于的3.3都版本

 npm  i  vue@3.2.40  -S

重新启动项目，可以成功关闭！

大家如果遇到同样问题可以一起讨论！

与鱼有约
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant-design-vue 的modal.confirm突然无法自动关闭
m0_71835253的博客
06-12 231
这个是我当前的版本 ，点击不能 关闭， 版本的问题。修改 ： "vue": "~3.2.0",
antdesign的modal.confirm突然无法自动关闭
weixin_45455337的博客
01-20 4156
它指示包管理器（如npm）可以安装与指定版本相同的主版本号（第一位数字）和次要版本号（第二位数字），但不包括修订版本号（第三位数字）之后的更新。例如，如果在package.json文件中指定了^3.2.0作为依赖版本号，那么包管理器将会安装3.2.x（包括3.2.0、3.2.1、3.2.2等）的版本，但不会安装3.3.0及以上的版本。这样做的目的是为了确保在包的后续版本发布时，能够自动安装向后兼容的更新，而不必手动更改版本号。另外也可能是vue3.4版本的原因，需要测试一下vue版本问题。
解决Ant Design Vue使用Modal对话框无法关闭的问题，本地可以关闭对话框但是打包后不能关闭对话框的问题。
最新发布
qq_43807473的博客
04-15 1660
解决Ant Design Vue使用Modal对话框无法关闭的问题，本地可以关闭对话框但是打包后不能关闭对话框的问题。首先说为什么会导致这个问题：因为现在vue官方的最新版本是3.4.x，可能是vue最新版本的部分代码与Ant Design不兼容导致的。次版本号的变化表示软件包具有新的功能，但是与之前的版本兼容。
antdv中的modal弹窗打开之后无法关闭
weixin_44689966的博客
01-13 2515
删除node_modules，删除package-lock.json。修改vue的版本，固定为3.3.x。具体问题可以看这个官方issue。
ant design的关闭ModalForm和Modal弹框，清除数据的方法
清风明月的博客
08-31 7093
ant design的关闭ModalForm和Modal弹框，清除数据的方法: 1、ModalForm弹框modalProps中加destroyOnClose <ModalForm visible={visible} modalProps={{ destroyOnClose: true }} /> </ModalForm> 2、Modal弹框中加destroyOnClose <Modal visible={visible} destroyOnClose: {t
【vue】ant-design弹出框无法关闭和runtimecore提示isFucntion is not function的问题修复
Little_Fishs的博客
03-06 724
2.弹框关闭失效问题，vue版本自动升级为3.4.x，ant- design也自动升级版本，新版本出现的这个问题，建议vue降低为3.3.X以下，vue-tsc降低为1.6.5，ant- design降低版本为3.2.20。【vue】ant-design弹出框无法关闭和runtimecore提示isFucntion is not function的问题修复，初步分析是vue发布3.4版本以后引起的兼容性问题。建议vue不要升级大版本，改为"vue": “~3.3.4”,重新安装依赖，再重新启动项目。
vue3.4 ant-design-vue的Modal.confirm无法关闭，需要将vue降为3.3
xixi4399的博客
01-11 1423
vue3.4 ant-design-vue的Modal.confirm无法关闭 需要将vue降为3.3
antd-vue 弹窗（modal）this.$confirm，不点击确定或取消按钮，关闭弹窗
热门推荐
YQxyqX555的博客
08-02 1万+
项目场景： 需求存在有一个全局最高层弹窗，点击跳转特定页面 问题描述： 使用modal，弹出的弹窗是通过v-model="visible"判断显示的，都可以在页面跳转后正常被关闭，但使用this.$confirm弹出的弹窗无法自动被关闭，则出现在特定页面出现上个界面的提示。 解决方案： 通过查看官方文档发现了destroy()的方法 则可以在data中定义modal，再使用 this.modal=this.$confirm({ title: “提示”, content: “确认要删除吗？”, onOk()
ant design vue Modal.confirm无法关闭的问题
TVM的博客
01-18 4392
使用ant design vue3.2.20版本的modal.confirm来生成提示框，但是无论是@ok还是@cancel都无法正常关闭提示框。甚至使用 Modal.destroyAll()都无法将其关闭，控制台也没报错。解决办法：当前vue版本是3.4.x，将版本降低至3.2.x，就可以正常将confirm关闭。
【Ant Design of Vue】Modal.confirm无法关闭的bug
一只正在狂飙的肥兔
01-18 5346
在使用 Ant Design Vue 的 Modal.confirm 确认框时，出现了点击取消和确定后 Modal.confirm 确认框无法关闭的问题。
layer.confirm点击第一个按钮关闭弹出框的方法
01-19
layer.confirm弹出框，当你点击第一个按钮的时候，这个弹出层不会关闭，也是给一些小伙伴带来了一些困扰， 下面分享两个解决方案： ①可以将第一个按钮的回调函数传一个index，然后使用layer.close(“index”)就可以...
vue弹窗组件的实现示例代码
10-18
在Vue.js中，弹窗组件是一种非常常见的UI元素，它用于显示临时通知、确认对话框或者进行用户交互。本文将详细介绍如何使用Vue实现一个通用的弹窗组件，并讲解相关的关键知识点。 首先，Vue组件是Vue.js的核心特性之...
关于vue.js弹窗组件的知识点总结
10-21
最近在开发过程对对于组件化的开发有一些感想，于是...弹窗组件一直是 web 开发中必备的，使用频率相当高，最常见的莫过于 alert，confirm和prompt这些,不同的组件库对于弹窗的处理也是不一样的，下面来一起看看吧。
模拟layer体验做的vue弹窗组件一款好用的vue弹窗组件
08-10
在这个项目中，“vue弹窗组件”可能是通过定义一个Vue组件来实现的，这个组件具有弹出和关闭的功能，并且可以定制化样式和内容，以满足不同的应用场景。 在开发这样的组件时，开发者可能会涉及以下关键知识点： 1....
vue封装可复用组件confirm,并绑定在vue原型上的示例
10-16
本示例中，我们将探讨如何封装一个名为`confirm`的确认对话框组件，并将其绑定到Vue的原型上，以便在整个应用中方便地调用。 首先，我们创建两个文件：`confirm.vue`和`confirm.js`。`confirm.vue`负责定义组件的...
vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
agua001的博客
04-20 2896
vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
Ant Design Vue V3 Modal 对话框
m0_65137738的博客
02-07 6350
模态对话框。 何时使用# 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用Modal在当前页面正中打开一个浮层，承载相应的操作。 另外当需要一个简洁的确认框询问用户时，可以使用Modal.confirm()等语法糖方法。 API# # 参数 说明 类型 默认值 版本 afterClose Modal 完全关闭后的回调 function 无 bodyStyle Modal body 样式 object ...
antd $confirm无法关闭踩坑
m0_61837007的博客
06-08 2552
【代码】antd $confirm无法关闭踩坑。
vue关闭弹窗this.$confirm
08-29
要关闭Vue中的弹窗，可以使用以下代码： ``` this.$confirm({ // 弹窗的配置选项 }).then(() => { // 确认按钮的回调函数 }).catch(() => { // 取消按钮的回调函数 }); ``` 在这个代码片段中，`this.$confirm` 是一个Vue插件（例如`element-ui`）提供的方法，用于创建一个确认弹窗。你可以根据需要配置弹窗的选项，例如标题、内容、确认按钮文本等。 当用户点击确认按钮时，将执行 `then` 方法中的回调函数。如果用户点击取消按钮或关闭弹窗，则执行 `catch` 方法中的回调函数。 因此，如果你想要在弹窗显示后立即关闭它，你可以在 `then` 或 `catch` 的回调函数中进行关闭操作，如下所示： ``` this.$confirm({ // 弹窗的配置选项 }).then(() => { // 确认按钮的回调函数 this.$confirm.close(); }).catch(() => { // 取消按钮的回调函数 this.$confirm.close(); }); ``` 这样就可以通过调用 `this.$confirm.close()` 方法来关闭弹窗了。请注意，具体关闭弹窗的方法可能会因使用的弹窗插件而有所不同，上述示例仅适用于某些常见的UI库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值