美文网首页
正确使用element中Notification的回调方法clo

正确使用element中Notification的回调方法clo

作者: krystal_H | 来源:发表于2019-12-16 17:28 被阅读0次

    正确使用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]
      }
    },
    

    相关文章

      网友评论

          本文标题:正确使用element中Notification的回调方法clo

          本文链接:https://www.haomeiwen.com/subject/zvydnctx.html