Solution to ElementUI's this.$notify.close() call not working

Requirement Description

The project first requires the user to select a question. After the selection, the Notification component of ElementUI is used to remind the user that the file format is being checked (it needs to be submitted to the backend first, checked by the backend, and then the results are returned to the frontend). If the format check is correct, the Notification is closed and a MessageBox (also a component of ElementUI) pops up to inform the user that the uploaded file cannot be undone.

Problem Description

After checking whether the file format is correct, you need to manually call the relevant function to remove the Notification. According to the official documentation, using this.$notify.close() did not work and no error was reported in the console.

Problem Analysis

After printing this.$notify in the console, you can enter the Notification related functions as shown below:

In the code, we can see which functions are encapsulated inside Notification, including the close() function, which requires two parameters, id and userOnClose. It is not difficult to see from the code that id is the id of Notification. For example, when there are multiple Notifications, they can be closed selectively; userOnClose can pass in a function, which is a bit like a callback function. Therefore, if you want to use the close() function, you must know the id of the Notification you want to close, which will be briefly discussed at the end of this article.
Looking down at the code, you can see that there is a closeAll() function, which does not require any parameters and closes all Notifications by traversing, which is suitable for the scenario of this project (only one Notification needs to be closed).

Problem Solving

For this project, just call this.$notify.closeAll() .

Question extension

The main thing is, if there are multiple Notifications, what should I do if I want to close one of them? I tried to understand notify.js and found that the id is basically a pattern like notification_seed , which is a string consisting of the notification_ string plus a number. Looking at the source code, we find that the initial seed is 1, which means that the id of the first instantiated Notification should be notification_1 . As shown in the figure:

Now the problem comes. I call the close() function and pass in two parameters that seem to be correct, but it doesn't work:

To prevent my misunderstanding of the id, I debugged it in the browser and found that the id in the instance (instance of Notification) was indeed the id I analyzed:

So I used the debugging tool in the developer tools to check the execution steps of the close() function in notify.js step by step. I found that there was no problem with the code or the logic. Finally, instances also removed the Notification with the corresponding id through the splice function, but the Notification on the page remained there and did not disappear (the main function is in the rectangular box).

The above are some of my personal attempts at analysis. Of course, due to my limited ability, I didn’t solve the problem in the end. Those who are interested can study it.

This is the end of this article about how to solve the problem of ElementUI's this.$notify.close() call not working. For more related Element this.$notify.close() call content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!