正确使用element
中Notification
的回调方法
经常的用的是onClose(关闭notification)
和onClick(点击notification)
,
注意:
onClick: this.function()
和onClick() { this.function() }
的区别就行了,其他正常写就ok
对于
close
,API也有讲到:调用Notification
或this.$notify
会返回当前Notification
的实例。如果需要手动关闭实例,可以调用它的close
方法,按照API写就行。
onClick
需求一般要么是点击通知执行方法、要么是点击某个地方执行方法,我的需求是多个通知,点击单个通知的某个位置跳转且关闭
for (let i = 0; i < showList.length; i++) {
let notify = await this.$notify({//解决消息框重叠 也可以通过加延迟解决
title: showList[i].message.title,
message: h('p', [
h('p', null, showList[i].message.content),
h('p', {
class: 'notice-cursor',
on: {
click: () => {
this.closeNotification(showList[i].messageId)
},
},
}, '跳转列表查看'),
]),
dangerouslyUseHTMLString: true,
duration: 10000,
position: 'bottom-right',
customClass: 'home-notice',
offset: 20,
onClose() {
console.log('关闭回调')
}
})
this.notifications[showList[i].messageId] = notify
}
//关闭单个通知
closeNotification(messageId){
//省略部分代码
this.notifications[messageId].close()
delete this.notifications[messageId]
},
如果是点击通知块执行,直接把方法,写在onClick
回调中就可以了,注意this指向,即:
onClick() {
vm.closeNotification(showList[i].messageId)
}
关闭所有通知
//关闭所有通知
closeAllNotification() {
for (let key in this.notifications) {
this.notifications[key].close()
delete this.notifications[key]
}
},
网友评论