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

目录
  • 需求描述
  • 问题描述
  • 问题分析
  • 问题解决
  • 问题拓展

需求描述

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

问题描述

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

问题分析

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

在代码中,我们可以看到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。如图:

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

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

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

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

到此这篇关于ElementUI的this.$notify.close()调用不起作用的解决的文章就介绍到这了,更多相关Element this.$notify.close()调用=内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue 解决在element中使用$notify在提示信息中换行问题

    在项目开发过程中,遇到如下用户体验提升需求:需要实现错误提示时根据后台返回错误列表信息,换行展示. 实现方式如下: 通过F12元素查看,在对应的样式中加入white-space:pre-wrap,该样式的主要作用是识别字符串中的换行符"\n",故需要在待展示的信息字符串中加入相应的换行标识符. 在$notify消息提示中,作用于el-notification: .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式

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

    目录 需求描述 问题描述 问题分析 问题解决 问题拓展 需求描述 项目首先要用户选择某个问题,选择之后使用ElementUI的Notification组件提示用户正在对文件格式进行检查(需要先提交给后端,交给后端检查,再返回结果给前端).如果格式检查无误,则关闭Notification,弹出一个MessageBox(也是ElementUI的组件),告知用户上传文件之后不可撤销. 问题描述 在检查文件格式是否正确之后,需要手动调用相关函数,把Notification去掉.根据官方文档,使用this

  • Java基于Runtime调用外部程序出现阻塞的解决方法

    本文实例讲述了Java基于Runtime调用外部程序出现阻塞的解决方法, 是一个很实用的技巧.分享给大家供大家参考.具体分析如下: 有时候在java代码中会调用一些外部程序,比如SwfTools来转换swf.ffmpeg来转换视频等.如果你的代码这样写:Runtime.getRuntime().exec(command),会发现程序一下就执行完毕,而在命令行里要执行一会,是因为java没有等待外部程序的执行完毕,此时就需要使用阻塞,来等待外部程序执行结果: InputStream stderr

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题: 情况:在这个页面中出现了mounted 加载了两次的情况: 方法:排除法 首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次 初步判断是commit  方法导致的 二  验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次: 再次判断,不是由于commit引起的 三   猜

  • Python 调用PIL库失败的解决方法

    今天学习Python的时候,需要安装一个第三方库,Python Imaging Library,是Python下面一个非常强大的处理图像的工具库,不过PIL目前只支持到Python2.7版本. Pillow是PIL的一个派生分之,目前的最新版本是3.0 安装Pillow的时候,打开Python的安装目录(例如我的是C:\Python27\Scripts),命令行启用easy_install.exe pip pip是Python包管理宫羽,主要用于安装PYPI(python package ind

  • python多线程调用exit无法退出的解决方法

    python启用多线程后,调用exit出现无法退出的情况,原因是exit会抛出Systemexit的异常,如果在exit外围调用了try,就会出现ctrl+c两次才能退出的情况 解决方法: thread.setDaemon(True) thread.start() 线程启动前设置setDaemon(True) 以上这篇python多线程调用exit无法退出的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • docker容器调用yum报错的解决办法

    dockerfile里或者在容器里执行yum,报错,找不到源(invalid baseurl xxx),但是宿主机上执行yum是没问题的啊,为什么? 因为不论是dockerfile使用RUN关键字执行yum还是直接进入到容器里面执行yum,它们都是使用的docker镜像里面的源(CentOS是在路径/etc/yum.repo.d/CentOS-Base.repo),所以你要把宿主机上的同路径下的源拷贝到容器里面,然后docker commit一个新的"基础镜像",这个时候使用docke

  • 详解tensorflow2.x版本无法调用gpu的一种解决方法

    最近学校给了一个服务器账号用来训练神经网络使用,服务器本身配置是十路titan V,然后在上面装了tensorflow2.2,对应的python版本是3.6.2,装好之后用tf.test.is_gpu_available()查看是否能调用gpu,结果返回结果是false,具体如下: 这里tensorflow应该是检测出了gpu,但是因为某些库无法打开而导致tensorflow无法调用,返回了false,详细查看错误信息可以看到一行: 可以看到上面几个文件都顺利打开了,但是最后一个libcudnn

  • 关于element-ui中el-form自定义验证(调用后端接口)

    目录 element-ui中el-form自定义验证 需求 element-ui自定义form表单校验规则 注意 element-ui中el-form自定义验证 需求 在输入项目名称后,调用后端接口isNameOnly,若已存在,则效果如下图: 1.先设置校验规则rules <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px&quo

随机推荐