Vue Dialog Dialog 关闭的回调回调不起作用

于 2021-08-19 10:53:00 发布 1347 收藏
分类专栏： 项目总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42573597/article/details/119796878
版权

问题：在Dialog中close事件中定义方法清除Dialog表单数据，点击关闭时没有触发方法
在这里插入图片描述
在这里插入图片描述
原因：多加了v-if=“visible”；导致在Dialog关闭动画之前已经销毁Dialog
解决办法：去掉v-if=“visible”
在这里插入图片描述

qq_42573597
关注
  • 0
    点赞
  • 踩
  • 0
    收藏 更改收藏夹
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue-dialog:vue自定义弹窗组件（含回调）
05-10
具体参考博客：
jquery dialog的关闭事件不触发，触发不了
weixin_30632899的博客
09-19 429
在网上大部分是： close:function(event,ui){}; 但不管用，不过onClose:function(){};挺好使的，终于找到了 转载于:https://www.cnblogs.com/guozefeng/p/3329609.html
vue dialog关闭触发事件
然而老干妈早就看穿了一切
04-19 1万+
<el-dialog title="房间" :visible.sync="dialog" size="small" @close='close'></el-dialog> //关闭弹框的事件 close(){ 　　console.log('点击了关闭按钮======') }
ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭。
qq_34169240的博客
11-21 3852
今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。
vue+element 设置弹窗_封装Vue Element的dialog弹窗组件
weixin_32567865的博客
02-11 1701
我本没有想着说要封装一个弹窗组件，但有同行的朋友在问我，而且弹窗组件也确实在项目开发中用的比较多。思前想后，又本着样式统一且修改起来方便的原则，还是再为大家分享一个我所封装的弹窗组件吧。其实，并不是所有封装组件的方式都是一成不变的，你可以采用函数式组件这种能提高性能的方式，也可以使用带有状态和生命周期的普通组件的封装方式。但像dialog这种包含很多点击事件如确定或提交事件、取消或重置事件、右上角...
Element-ui 对话框el-dialog close关闭的回调 点击其他按钮关闭el-dialog时均调用close方法
小猫爪子
07-21 1万+
点击确定或取消按钮关闭窗口，则触发close关闭回调事件，调用refreshData方法。一定要避免重复调用！！ <el-button type="text" @click="centerDialogVisible = true" @close="refreshData">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" c
Vue Dialog 对话框 close失效问题
Amyt1的博客
04-14 2594
Vue Dialog 对话框 close失效问题 问题描述： 最近在写Vue后台用Dialog 对话框的时候，用colse关闭的回调的时候无效，表单里面的内容关闭弹窗，再次打开数据还是在 原因分析： 在弹窗里面没有定义prop属性，就造成弹窗关闭，数据还是没有被清空，resetFields()方法失效 解决方案： // 监听对话框的关闭事件，重置表单数据 addCateDialogClosed() { this.$refs.addRef.resetFields() } // 弹窗内容 这样问题就解决了
Mars3D dialog组件关闭回调问题 props
qq_43127193的博客
09-16 226
Mars3D dialog组件关闭回调问题 props
ElementUI dialog配合form,关闭dialog时清除校验
qq_1872583947的博客
06-08 997
在form表单中有prop属性的el-input元素会参与字段的校验（有校验不为空的、长度不符合的、手机号格式等等），会出现如下图所示情况，当我们关闭dialog再打开时，发现校验的错误信息还保存在表格中，我们应该如何解决呢？ 解决办法： 在dialog关闭的时候清除表单校验规则 <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="$refs.dialogForm.resetFie
Dialog 三种退出方式的回调分析
热门推荐
Mupceet
11-01 1万+
AlertDialog三种退出方式到底做了什么？
dialog函数式调用方法
Tyler_zch的博客
08-11 388
dialog函数式调用
解决Element中的el-dialog在第一次使用后无法再次触发mounted的问题
许洪昌的博客
06-16 5631
作为一名非专业前端人员，今天遇到这个问题，小花费了点功夫。最终还是找到了解决办法。 现象： el-dialog组件在第一次使用的时候没有问题，mounted也可以触发，但是关闭dialog后再次弹出就不再走mounted，导致可能没有办法及时获取到新的数据。 原因： 具体原因还真的不知道，反正我在关闭dialog的时候销毁了dialog中的元素也不起作用。待我学习一下。。。。 解决办法： 网上有很多人说在dialog的外层套一个div来解决，具体方式如下图： 可能我的姿势不是很正确，反正一
resetFields重置初始值不生效的原因
最新发布
marsmoon的博客
12-30 2147
resetFields重置初始值不生效
el-dialog作为子组件使用(关闭报错解决方法）
weixin_43254676的博客
04-28 6802
el-dialog作为子组件使用(关闭报错解决方法）
ELement组件dioalog作为组件时点右上角关闭无法再次打开
qq_42306286的博客
04-02 977
将组件中包含dialog时，如果不对其进行一些设置，点击关闭后会报错而无法再次打开。 两种方法，第一种是将关闭按钮去掉，:show-close="false" <el-dialogtitle="":visible.sync="updateModelDialog"width="55%"center:show-close="false"> 第二种是调用关闭回调方法，让他和取...
VUE element-ui之Dialog对话框关闭事件
HanXiaoXi_yeal的博客
05-21 4922
步骤： 在标签中定义事件 <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="annularPopup" width="60%" center @close="closeDialog" > js调用方法即可 closeDialog() { this.$refs.tableList.cl
vue element-ui 第一次打开无法获取dialog里的元素   Dialog 对话框 open Dialog 打开的回调
看到我在玩请叫我去敲代码的博客
06-21 1万+
Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过ref获取相应组件，请在open事件回调中进行。 最近才接触到vue和element.ui，发现element.ui里的dialog有一个问题不知道该怎么解决。 1、例如我在dialog里写了一个表单组件，给表单组件设置了ref为form,在...
vue使用dialog关闭前调用_vant-ui组件调用Dialog弹窗异步关闭操作
weixin_39969060的博客
12-19 770
需求描述：需求描述：官方文档又是组件调用方式，又是函数调用方式。我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用api接口，返回成功后，关闭弹窗。一个很简单的东西，element-ui用的很方便，在这里就懵比了，刚开始做的，弹窗关闭了，才返回异步接口调用的结果。网速慢点，用起来真的很不好。正确的解决方式一：v-model="showdialog"title="提示"...
Vue使用el-dialog关闭后重置表单
zezejingi的博客
01-14 1925
Vue使用el-dialog关闭后重置表单
【bug】关于Vue封装el-dialog对话框关闭无反应问题
weixin_49668076的博客
11-19 1246
封装dialog弹窗

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_42573597

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值