正确使用element中Notification的回调方法close、onClick、onClose

正确使用elementNotification的回调方法
经常的用的是onClose(关闭notification)onClick(点击notification)

注意:
onClick: this.function()onClick() { this.function() }的区别就行了,其他正常写就ok

对于close,API也有讲到:调用 Notificationthis.$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]
  }
},
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容