problem

1. It can pop up, but the customized content cannot customize the event. For example, you can add a button, but you can't listen to click events on the button.
2. Background query does not return new logs, but all logs. The front end needs to judge the content to determine what is new and what is the previous logs. New ones pop up, and some of them don't need to be moved.

Solve

1. The query found that vue has createElement method ([about createElement method ([about createElement method ([don't explain too much about createElement, please refer to the official api]( Https://cn.vuejs.org/v2/guide/render-function.html × createElement - parameter )), create a vnode directly to the api,

					const h = this.$createElement
					this.dialogObj[v.id] = this.$notify({
                        showClose: false,
                        position: 'bottom-right',
                        dangerouslyUseHTMLString: true,
                        message: h('div', { class: 'message' }, [
                          h('div', { class: 'info' }, [
                            h('div', null, [
                              h(
                                'div',
                                { class: 'title' },
                                dateFtt('hh:mm', new Date(v['created_at']))
                              ),
                              h('div', { class: 'content' }, v['message'])
                            ]),
                            h(
                              'div',
                              { class: 'oldDate' },
                              formatTime(
                                new Date(v['created_at']).getTime() / 1000
                              )
                            )
                          ]),
                          h('div', { class: 'btnList' }, [
                            h(
                              'span',
                              {
                                class: 'detail',
                                on: {
                                  click: _self.doSomeThing.bind(this, 1, v)
                                }
                              },
                              'View details'
                            ),
                            h('span', null, '|'),
                            h(
                              'span',
                              {
                                class: 'later',
                                on: {
                                  click: _self.doSomeThing.bind(this, 2, v)
                                }
                              },
                              'Check later'
                            )
                          ])
                        ]),
                        duration: 0
                      })

As the official api said, after the creation is successful, an instance will be returned, which can be saved with variables, so that the corresponding pop-up box can be closed next time.

1. As for the second one, using the uniqueness of the key of the object, throw an attribute with id as the key in the image object every time. Next time, judge whether the corresponding id has a value in the object. No value represents a new log. Just pop it up.

if(!this.dialogObj[v.id]){//Judge whether there is value in the object 
	 this.dialogObj[v.id] = this.$notify(...)
}

After the solution, we can see that it's always very simple. What's missing is thinking. There is also a lack of understanding of the underlying vue. Make progress slowly!