element-ui $notify自定义html 和点击事件

最近公司需求，循环查询后台日志，有新数据弹出提示，效果类似$notify的样式，然后踩了一些坑，这里记录下，帮助一些朋友。

问题

1. 可以弹出，但是自定义的内容无法自定义事件。比如相加一个button按钮，却无法对这个button监听点击事件。
2. 后台查询并不会返回新增的日志，而是将所有的日志返回，需要前端对内容判断，确定哪些东西是新增，哪些是之前就有的日志。新增的就弹出，之前有的就不用动。

解决

1. 查询发现vue有$createElement方法（[关于$createElement不做过多解释，可以参考官方api](https://cn.vuejs.org/v2/guide/render-function.html#createElement-参数)），创建一个vnode直接给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)
                                }
                              },
                              '查看详情'
                            ),
                            h('span', null, '|'),
                            h(
                              'span',
                              {
     
                                class: 'later',
                                on: {
     
                                  click: _self.doSomeThing.bind(this, 2, v)
                                }
                              },
                              '稍后查看'
                            )
                          ])
                        ]),
                        duration: 0
                      })

调用 Notification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

如官方api所说，创建成功后，会返回一个实例，可以用变量保存，以便下次关闭对应的弹框使用。

2. 关于第二个，利用了对象的key的唯一性，每次查询像对象中扔一条以id为key的属性，下次查询，判断对应的id在对象中有没有值，没有值代表是新的日志。直接弹出就行。

if(!this.dialogObj[v.id]){
     //判断是否对象中已经有值 
	 this.dialogObj[v.id] = this.$notify(...)
}

解决之后再看，发现总是很简单，缺的是思路。还有对vue底层的不了解。慢慢进步呢！