如何通过Vue和Element-UI自定义Notification中的按钮并实现关闭功能？

本文共计722个文字，预计阅读时间需要3分钟。

使用Vue和Element-UI的Notification自定义按钮实现关闭功能及处理多个通知：

在Vue组件中，可以通过Element-UI的Notification组件来显示通知消息。以下是如何自定义一个按钮来关闭特定通知，以及如何处理多个通知，确保只有一个消息属性存在，以节省操作空间。

javascript 显示通知 关闭通知

这段代码中，`openNotification`方法用于打开一个通知，并返回一个通知ID。这个ID被存储在组件的`data`中，以便后续可以关闭这个通知。`closeNotification`方法用于关闭通过`notificationId`指定的通知。通过这种方式，可以有效地管理多个通知，同时保持代码的简洁和可维护性。

vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知

使用element-ui中的Notification，只有一个message属性是有很大的操作空间，其余的都是写死的，无法进行扩展，达不到想要的效果。所以只能在message上下功夫。

在element-ui官方文档中可以看到Notification中的message属性是可以处理VNode的所以我们可以使用VNode来达到我们需要的效果。

如何关闭通知呢？

当创建通知的时候，会返回该通知的实例，通过该实例的close方法可以将通知关闭。

那么当有多个通知显示在屏幕上时，如何关闭特定弹窗的呢？

创建一个字典，字典的key是message的Id，value是显示该消息的通知的实例。从而可以关闭特定的通知。代码如下。