ant design vue Modal.confirm无法关闭的问题

最新推荐文章于 2024-04-15 17:04:49 发布
最新推荐文章于 2024-04-15 17:04:49 发布
阅读量3.6k 收藏 10
点赞数 12
分类专栏： VUE ant design vue 文章标签： vue.js 前端 anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42580432/article/details/135676173
版权

使用ant design vue3.2.20版本的modal.confirm来生成提示框，但是无论是@ok还是@cancel都无法正常关闭提示框。甚至使用 Modal.destroyAll()都无法将其关闭，控制台也没报错。未找到真正原因。

解决办法：当前vue版本是3.4.x，将版本降低至3.2.x，就可以正常将confirm关闭

TVM
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
antd Modal.confirm点击确定请求完成后在关闭弹窗
diaogechuo1880的博客
05-10 7604
需求：删除功能使用confirm弹窗时希望点击确认后，请求删除接口，请求成功后在关闭confirm弹窗（避免请求还未完成用户有其他操作） 问题：antd的Modal.confirm窗口官方给出的官方实例通过destroy()销毁弹窗，一般点击后直接关闭，而不是loading完成后关闭，所以我们需要找一个恰当的时机触发destroy() 解决： 注：该项目是react项目，用到了um...
antdesign的modal.confirm突然无法自动关闭
weixin_45455337的博客
01-20 3331
它指示包管理器（如npm）可以安装与指定版本相同的主版本号（第一位数字）和次要版本号（第二位数字），但不包括修订版本号（第三位数字）之后的更新。例如，如果在package.json文件中指定了^3.2.0作为依赖版本号，那么包管理器将会安装3.2.x（包括3.2.0、3.2.1、3.2.2等）的版本，但不会安装3.3.0及以上的版本。这样做的目的是为了确保在包的后续版本发布时，能够自动安装向后兼容的更新，而不必手动更改版本号。另外也可能是vue3.4版本的原因，需要测试一下vue版本问题。
vue3.4 ant-design-vue的Modal.confirm无法关闭，需要将vue降为3.3
xixi4399的博客
01-11 1103
vue3.4 ant-design-vue的Modal.confirm无法关闭 需要将vue降为3.3
解决Ant Design Vue使用Modal对话框无法关闭的问题，本地可以关闭对话框但是打包后不能关闭对话框的问题。
最新发布
qq_43807473的博客
04-15 848
解决Ant Design Vue使用Modal对话框无法关闭的问题，本地可以关闭对话框但是打包后不能关闭对话框的问题。首先说为什么会导致这个问题：因为现在vue官方的最新版本是3.4.x，可能是vue最新版本的部分代码与Ant Design不兼容导致的。次版本号的变化表示软件包具有新的功能，但是与之前的版本兼容。
vue3项目打包构建后弹窗无法出现的问题解决
IU
01-10 899
【代码】vue3项目打包构建后弹窗无法出现的问题解决。
antdv中的modal弹窗打开之后无法关闭
weixin_44689966的博客
01-13 2114
删除node_modules，删除package-lock.json。修改vue的版本，固定为3.3.x。具体问题可以看这个官方issue。
【Ant Design of Vue】Modal.confirm无法关闭的bug
一只正在狂飙的肥兔
01-18 4059
在使用 Ant Design Vue 的 Modal.confirm 确认框时，出现了点击取消和确定后 Modal.confirm 确认框无法关闭的问题。
需求：点击弹框外部不关闭弹窗
backey_mi的博客
12-07 989
1.方法 修改element.js引用代码，在引用组件前修改默认属性. import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; Vue.use(ElementUI); //配置 dialog组件 组件点击遮罩层不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false; Vue.prototype.$axios = axios 2.弹框外
antd $confirm无法关闭踩坑
m0_61837007的博客
06-08 2370
【代码】antd $confirm无法关闭踩坑。
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()
解决无法关闭IE中alert()或者confirm弹出窗口的问题
知 行 合 一
10-31 5215
<br />在用AutoIt调用javascript时，如果该方法调用了alert()，会马上弹出一个警告窗口，这时候，autoit进程停止执行,要等到你点击ok或者关闭按键，该窗口消失后，autoit脚本才会继续运行。那有没有办法，让脚本帮我们来关闭这个窗口呢？有一种思路就是新建一个autoit进程来监控是否有窗口弹出，代码如下：<br />#include <IE.au3> WinWaitActive("Microsoft Internet Explorer","") If WinActive
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
蚂蚁设计可拖动模态 Ant Design的模态，可拖动。 :globe_showing_Americas: :sparkles: 特征 用标题栏拖动。 调整大小与句柄。 保持界限。 在拖动过程中。 调整大小期间。 在调整窗口大小期间。 具有托管zIndex多个模态。 从中心打开。 用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意：您必须使用[email protected]和[email protected]或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' import { DraggableModal , DraggableModalProvider } from
基于ant design vue 实现的一套后台管理框架.zip
05-16
基于ant design vue 实现的一套后台管理框架。主要使用vue3 + vuex + vue-router + ts 基于ant design vue 实现的一套后台管理框架。主要使用vue3 + vuex + vue-router + ts 基于...
ruoyi-cloud前端工程，使用ant design vue框架.zip
03-01
ruoyi-cloud前端工程，使用ant design vue框架.zip
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue实现excel导入功能
ant design of vue.zip
07-02
antd.css、antd.js、antd.js.map、antd-with-locales.js等
解决vue3 Vben框架弹窗点击遮罩层不关闭的BUG
热门推荐
weixin_42125732的博客
01-26 1万+
最近博主正在努力学习VUE3的开发，在开发的过程中遇到了Vben框架弹窗点击遮罩层不关闭的BUG，查了很多资料后，亲测如下 找到这个对应的路径：\src\components\Modal\src\components\Modal.tsx 1.在setup 加上 emit参数 2.加上点击关闭的方法如 const handleCancel = (e: Event) => { emit('cancel', e); }; 3.最后再把它return 出去，注意加上方法，如下...
vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
agua001的博客
04-20 2773
vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
dialog弹窗关不掉 vue_最佳实践：vue弹窗及滑块响应式
weixin_30350163的博客
01-03 623
下述为项目中弹窗/滑块统一处理方式汇总（下述已 el-dialog 为例）演示环境：https://eugvd.csb.app/Demo 地址：https://codesandbox.io/s/thirsty-sun-eugvd?file=/src/components/User.vue:2122-2497DOM 结构方式1. (推荐1：直接注入数据「详情」) el-dialog 壳子在外，内容单...
ant-design-vue的modal.confirm怎么实现content支持显示html格式
06-02
可以通过设置Modal.confirm的content属性为一个函数，函数返回一个Vue组件来实现支持显示HTML格式的内容。具体实现可以参考以下代码： ```javascript import { Modal } from 'ant-design-vue'; Modal.confirm({ title: '确认框', content: () => ({ render() { return <div dangerouslySetInnerHTML={{ __html: '<p>这是一段HTML格式的文本</p>' }} />; }, }), }); ``` 在上面的代码中，我们通过传递一个函数来设置Modal.confirm的content属性，这个函数返回一个Vue组件，组件的render函数中通过`dangerouslySetInnerHTML`属性来渲染HTML格式的文本。需要注意的是，使用`dangerouslySetInnerHTML`属性需要谨慎，因为它可以引起XSS攻击。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值