在Vue项目中，Element-UI库提供了一个名为`Notification`的组件，用于创建全局的通知提示。这个组件在默认情况下提供了一些基本的配置选项，但有时我们可能需要更自定义的功能，比如添加自定义按钮或者控制多个通知的关闭。本文将详细介绍如何在Vue中使用Element-UI的`Notification`组件来实现这些高级功能。
`Notification`组件的`message`属性是一个非常关键的参数，因为它允许我们插入Vue的VNode（虚拟DOM节点）。这意味着我们可以构建复杂的结构，包括自定义的按钮和其他交互元素。例如，我们可以创建一个包含消息内容和关闭按钮的通知：
```javascript
message: this.$createElement('div', null, [
this.$createElement('span', null, message.content),
this.$createElement('div', null, [
this.$createElement('button', {
style: {
padding: '10px 18px',
margin: '10px 12px 0px 2px',
borderRadius: '3px',
backgroundColor: '#409EFF',
color: '#fff',
cursor: 'pointer',
},
on: {
click: () => this.closeNotification(id, operateCode, message),
},
}, '关闭'),
]),
])
```
在上面的代码中，我们创建了一个带有“关闭”按钮的`Notification`，并且绑定了点击事件来触发`closeNotification`方法，以关闭指定的通知。
为了管理多个`Notification`实例，我们需要一个数据存储结构来保存每个通知的引用。在Vue实例的`data`对象中，我们可以定义一个`notifications`对象，其中键为通知的唯一ID，值为对应的`Notification`实例：
```javascript
data() {
return {
notifications: {},
};
},
```
当创建新的`Notification`时，我们可以将其实例保存到`notifications`对象中：
```javascript
let notify = this.$notify(options);
this.notifications[message.messageId] = notify;
```
关闭特定通知可以通过`notifications`对象的键值访问对应的`close`方法：
```javascript
closeNotification(id, operateCode, message) {
this.notifications[message.messageId].close();
delete this.notifications[message.messageId];
}
```
同时，如果需要关闭所有打开的通知，可以遍历`notifications`对象并调用每个实例的`close`方法：
```javascript
closeAllNotification() {
for (let key in this.notifications) {
this.notifications[key].close();
delete this.notifications[key];
}
}
```
`openMessageTips`方法接收消息对象，并根据需求打开新的通知。在这个方法中，我们先调用`closeAllNotification`来清除已存在的通知，然后创建新的`Notification`。
总结起来，通过利用Element-UI的`Notification`组件的灵活性，以及Vue的数据绑定和事件处理能力，我们可以创建自定义的、带有关闭按钮的通知，并有效地管理多个通知实例。这不仅提高了用户体验，也使得通知功能更加灵活和可扩展。在实际开发中，这种自定义方式可以满足更多复杂场景的需求。
吾乃曹贼2022-12-29实在是宝藏资源、宝藏分享者！感谢大佬~
