ElementUI的this.$notify.close()调用不起作用的解决

作者:quarkape 时间:2024-05-09 09:53:16 

需求描述

项目首先要用户选择某个问题,选择之后使用ElementUI的Notification组件提示用户正在对文件格式进行检查(需要先提交给后端,交给后端检查,再返回结果给前端)。如果格式检查无误,则关闭Notification,弹出一个MessageBox(也是ElementUI的组件),告知用户上传文件之后不可撤销。

问题描述

在检查文件格式是否正确之后,需要手动调用相关函数,把Notification去掉。根据官方文档,使用this.$notify.close()并没有起作用,并且控制台没有报错。

问题分析

在控制台打印this.$notify之后,可以进入Notification的相关函数如图:

ElementUI的this.$notify.close()调用不起作用的解决

在代码中,我们可以看到Notification内部封装了哪些函数,其中就包含close()函数,该函数需要两个参数,id和userOnClose。查看代码不难看出,id就是Notification的id,比如存在多个Notification的时候,可以选择性的关闭;userOnClose可以传入一个函数,有一点儿像回调函数。因此,想要使用close()这个函数,必须知道想要关闭的那个Notification的id,文末再简单探讨。
往下看代码,可以看到有一个closeAll()函数,该函数不需要传入任何参数,并且通过遍历将所有Notification都关闭,适用于本项目的情景(只有一个Notification需要关闭)。

问题解决

对于本项目来说,直接调用this.$notify.closeAll()就行了。

问题拓展

主要就是对于有多个Notification,想要关闭其中一个怎么办?我尝试去理解notify.js,发现id基本上是notification_seed这样的模式,即notification_字符串加上一个数字组成的字符串。查看源码,发现初始seed为1,也就是第一个实例化的Notification的id就应该是notification_1。如图:

ElementUI的this.$notify.close()调用不起作用的解决

现在问题来了,我调用close()函数,并且传入两个貌似应该正确的参数,发现没起作用:

ElementUI的this.$notify.close()调用不起作用的解决

为了防止我对id的理解有误,我在浏览器中进行调试,发现instance(Notification的实例)里面的id确实就是我分析的那个id:

ElementUI的this.$notify.close()调用不起作用的解决

于是我再结合开发者工具中的调试工具,一步步查看notify.js里面的close()函数的代码的执行步骤,我发现,代码都没有问题,逻辑上也没有问题,最后instances也通过splice函数把对应id的Notification给剔除了,但是页面上的Notification就是坚挺在那里没有消失(矩形框里面是主要函数)。

ElementUI的this.$notify.close()调用不起作用的解决

以上是个人尝试的一些分析,当然,由于能力有限,最后也没有解决。感兴趣的大佬可以研究一下。

来源:https://blog.csdn.net/qq_43114230/article/details/119548117

标签:Element,this.$notify.close()
0
投稿

猜你喜欢

  • Pycharm之快速定位到某行快捷键的方法

    2022-06-20 14:07:53
  • 详解python内置常用高阶函数(列出了5个常用的)

    2023-01-11 18:52:19
  • 两侧背景自动延伸的CSS实现方法

    2010-02-24 09:42:00
  • 什么是gRPC

    2023-01-16 15:23:53
  • oracle数据库冷备份的方法

    2023-07-19 09:51:19
  • 各种SQL语句速查手册

    2007-09-27 19:31:00
  • SQL Server数据库开发的二十一条法则

    2024-01-18 05:30:40
  • 基于python代码批量处理图片resize

    2022-03-18 23:06:58
  • Python实现向服务器请求压缩数据及解压缩数据的方法示例

    2023-03-14 05:02:08
  • vue中的数据绑定原理的实现

    2024-05-05 09:09:34
  • 举例讲解Python的lambda语句声明匿名函数的用法

    2021-05-29 13:02:53
  • python 追踪except信息方式

    2022-10-07 13:46:02
  • asp OpenTextFile文本读取与写入实例代码

    2011-04-15 11:00:00
  • pandas基础 Series与Dataframe与numpy对二进制文件输入输出

    2023-10-18 08:20:13
  • 只截取ip前6位的asp代码

    2009-05-29 18:30:00
  • python快速排序的实现及运行时间比较

    2022-11-30 20:41:27
  • python DataFrame数据格式化(设置小数位数,百分比,千分位分隔符)

    2021-02-03 21:34:10
  • django实现图片上传数据库并显示

    2024-01-13 08:52:24
  • 游戏开发Unity2D图片任意形状破碎裂片效果展示

    2022-01-18 04:43:15
  • python中的try except与R语言中的tryCatch异常解决

    2021-10-22 02:24:48
  • asp之家 网络编程 m.aspxhome.com