关于antd-desgin-vue使用弹框作为外部组件引入在取消/关闭弹框的时候报错

最新推荐文章于 2024-07-03 21:18:58 发布
最新推荐文章于 2024-07-03 21:18:58 发布
阅读量1.4k 收藏 1
点赞数
原文链接：https://blog.csdn.net/weixin_34128237/article/details/88183967
版权
在项目中，为实现业务需求，将antd-design-vue的Modal组件进行了封装，创建了名为a-modal的独立组件。然而在实际使用过程中，遇到一个问题：在完成操作后关闭或取消弹框时出现错误。经过排查，发现错误源于v-model绑定的this.visble2。修正此问题后，成功解决了弹框关闭时的报错，确保了组件的正常工作。
摘要由CSDN通过智能技术生成

前言：项目需要，将antd-desgin-vue的弹框作为一个单独的业务组件封装了一下 a-modal， 在引入以后选择操作完成以后点击取消或者/关闭弹框会报错，看图
在这里插入图片描述
解决办法:
在这里插入图片描述
在这里插入图片描述上面v-model绑定 this.visble2 问题解决

恰好有你
关注
ant弹窗_vue ant design 封装弹窗表单用法
weixin_34439836的博客
01-14 5469
:visible="true":title='title'@ok="handleOk('ok')"@cancel="handleOk('return')":centered="true":confirmLoading="confirmLoading":width="width">:label="itme.label"v-if="itme.type === 'input'":label-col...
vue-antd-admin管理后台使用教程
qianxuezi的博客
07-16 4272
项目地址：https://gitee.com/gist006/vue-antd-admin https://github.com/biubiubiu01/vue-antd-admin 前端小白看过来！ 最近需要做一个管理平台，找到这个框架觉得功能齐全，很符合我的需求，所以决定基于这个框架来做我的项目。但由于我对vue、nodejs不是特别熟悉，所以频频遇到问题，不过还在最后还是成功了。特写篇笔记来总结分享，让前端小白也能快速把这个框架用起来！ 首先要把项目拉到本地。 git clone https://gi
【Ant Design of Vue】Modal.confirm无法关闭的bug
一只正在狂飙的肥兔
01-18 6825
在使用 Ant Design Vue 的 Modal.confirm 确认框时，出现了点击取消和确定后 Modal.confirm 确认框无法关闭的问题。
解决Ant Design Vue使用Modal对话框无法关闭的问题，本地可以关闭对话框但是打包后不能关闭对话框的问题。
qq_43807473的博客
04-15 2520
解决Ant Design Vue使用Modal对话框无法关闭的问题，本地可以关闭对话框但是打包后不能关闭对话框的问题。首先说为什么会导致这个问题：因为现在vue官方的最新版本是3.4.x，可能是vue最新版本的部分代码与Ant Design不兼容导致的。次版本号的变化表示软件包具有新的功能，但是与之前的版本兼容。
vue3.4 ant-design-vue的Modal.confirm无法关闭，需要将vue降为3.3
xixi4399的博客
01-11 1581
vue3.4 ant-design-vue的Modal.confirm无法关闭 需要将vue降为3.3
antd-vue的modal对话框关闭报错
qq_44242707的博客
05-31 2158
第三方库版本：Vue3、Antd3.2 现象：modal框点击关闭报错 原因：modal通过v-model绑定作为prop传入的visible时，modal内置方法将更新prop中的visible，这种直接修改prop的情况导致报错 解决方案：v-model:visible = “visible” => v-bind:visible = “visible” ...
关于ant design vue 使用Modal无法关闭弹窗的解决思路
最新发布
weixin_44784401的博客
07-03 1469
关于ant design vue 使用Modal无法关闭弹窗的解决思路node_modules/.pnpm/pinia@2.1.7_typescript@5.5.2_vue@3.2.33/node_modules/pinia/dist/pinia.mjs:6:9: 6 │ import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2,
基于antd-vue图片组件封装优化
weixin_44191425的博客
12-09 1051
<template> <div class="clearfix"> <a-upload list-type="picture-card" :file-list="fileList" :headers="headers" @preview="handlePreview" :custom-request="customRequestFunction" :before-upload="beforeUp
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
关于antd-vue 日期组件手动关闭弹出框的问题
weixin_44191425的博客
12-14 3791
由于产品的需求，有一个日期筛选的条件，如图所示 框架选用的是ant-vue，选择了其中range的插件 <a-range-picker style="width: 214px" :value="searchTime" :placeholder="['开始月份', '结束月份']" format="YYYY-MM" :mode="modelType" @panelChange="handleChange" @change="clearValue" > <a-icon slot="suffi
2020-2021暑期项目实训第一周——vue-antd-admin使用PageView模板报错解决
Android Studio中实现普通、点击、禁用状态下圆角按钮背景颜色的改变
07-04 355
在开发中，前端开发使用了vue-antd-admin这个前端开发组件库，在编写前端页面代码时使用了自带的页面视图PageVue，包含了 PageLayout 布局和路由视图内容区，按照官网上面给出的使用方式写好后，却发现页面没有办法渲染，并在火狐浏览器中报错信息为 [vue warn]:Error in render: “TypeError: this.page is undefined”，报错位置在PageView.vue中。 查看PageView.vue文件后发现已经声明了page，说明是其他位置的导致
关于vue-antd-pro项目启动报错
weixin_44488149的博客
07-20 3027
关于vue-antd-pro项目done下来后启动报错问题
弹出框关闭之后，页面会自动回到顶部的解决办法。
y526355442的博客
04-13 4761
弹出框关闭之后，页面会自动回到顶部的解决办法。 找过很多种解决办法，大部分都不能满足我的需要。记录一下成功的解决办法： 在打开弹框的方法中添加： document.documentElement.style.overflow = ‘hidden’; //隐藏横竖滚动条 这就其实相当于把整个body的滚动条禁用，如果直接关闭弹框页面滚动条也不会再显示，所以在关闭弹框的时候： document.doc...
ant design vue Modal.confirm无法关闭的问题
TVM的博客
01-18 5342
使用ant design vue3.2.20版本的modal.confirm来生成提示框，但是无论是@ok还是@cancel都无法正常关闭提示框。甚至使用 Modal.destroyAll()都无法将其关闭，控制台也没报错。解决办法：当前vue版本是3.4.x，将版本降低至3.2.x，就可以正常将confirm关闭。
基于Antd的模态框modal不显示 确认和取消按钮
cat_want_fly的博客
08-10 6096
基于Antd的模态框modal不显示 确认和取消按钮
ant-design-vue搞一个等待回调的确认弹窗
giMeMor的博客
09-24 523
这里为什么要关掉maskClosable呢，看大家的场景需要吧，因为antdesign没有提供关闭蒙版的api（可能是我没找到，我太菜了），我没有办法在关闭蒙版时执行我需要的操作，所以我就关掉了。我这里是vue3 + ts，如果不是用ts的话，那就把lang="ts"去掉就行了，自己灵活了。在网上搜了一下没搜到，所以自己搞了一个，分享给跟我一样有需要的小白。
react17 antd中触发Tooltip组件，切换到其他页面无法关闭问题
qq_44883318的博客
07-26 1186
所以切换到其他页面时，react拿不到提示框，所以setState无效（可以说是被存起来了，但不会去刷新页面），但调试框Element可以拿到提示框，这个时候我们可以从dom操作出发。切换到B页面，触发关闭按钮无效。2.在关闭后，open状态为false（切换到其他页面open状态不会发生变化，只有页面切换回来，open状态才被拿出来渲染），这个时候把它样式设置为空，防止阻碍Tooltip内置打开效果。实现代码：（效果：鼠标进入打开，鼠标出去关闭，点击会打开，但只能摁X按钮才能关闭）
antdv中的modal弹窗打开之后无法关闭
weixin_44689966的博客
01-13 2892
删除node_modules，删除package-lock.json。修改vue的版本，固定为3.3.x。具体问题可以看这个官方issue。
vue二次封装ant-design-vue中的Modal弹窗组件，实现拖拽，全屏两种功能，原有参数属性不变
m0_57071129的博客
01-17 3291
在我们的项目的有的地方需要用弹框的拖拽，以及弹窗自定义全屏显示的需求，所以再次将二次合一，同时弹框里面内容自适应屏幕高度在ant-design-vue中，已经实现了拖拽，全屏的功能，下面是ant官网的示例。
antd-virtual-select vue版本
09-07
antd-virtual-select是一个基于Ant Design开发的虚拟选择器组件，适用于Vue版本。 虚拟选择器是一种优化性能的技术，特别适用于大型数据集合的选择器。与传统的选择器组件不同，虚拟选择器只会渲染当前可见的选项，而不是渲染整个选项列表。这样可以大大提高渲染和响应的速度，并减少内存的占用。 antd-virtual-select为Vue提供了一套简洁、易用的虚拟选择器组件。它继承了Ant Design的风格和组件库特色，提供了丰富的功能和配置选项。 使用antd-virtual-select，我们可以通过传入一个包含所有选项数据的数组，以及一些配置选项，来创建一个虚拟选择器。选择器可以根据需求进行筛选、搜索和排序等操作，并且可以根据不同的样式和交互需求进行自定义。 通过使用虚拟选择器，我们可以有效地处理大量的选项数据，提高页面性能和用户体验。同时，antd-virtual-select还集成了一些常用的功能，例如多选、标签功能等，方便开发者根据具体需求进行定制化开发。 总的来说，antd-virtual-select是一款高性能、易用的虚拟选择器组件，适用于Vue开发。它提供了丰富的功能和自定义选项，可以帮助我们更高效地处理大量的选项数据，提升页面性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值