Element的Notification通知自定义样式&手动关闭&直接渲染带html格式的字符串

效果图：

功能点1：弹窗需要自定义样式，例如实现滚动条展示多条数据

答：其实简单的自定义样式可以使用官网提供的：message 属性支持传入 HTML 片段

不过我用的是 createElement，这个的使用方法具体用法可以参考这篇博客：

[Vue]createElement参数 - vickylinj - 博客园

功能点2：渲染数据的时候不能，挤在一起，而要能将数组里的数据换行显示

答：后端返回的数据是一个数组类型，所以我需要将数组遍历出来加上换行符号
,所以这里要用到createElement的DOM属性

功能点3：要能区分弹窗是自动关闭的？还是手动点击按钮关闭的？

答：因为就算手动调用弹窗的关闭方法，一样会执行onClose的关闭回调，所以压根没法区分是点击了X关闭按钮还是我弹窗自己定时关闭的。所以我是将弹窗的关闭按钮隐藏，自己画了一个上去，然后监听这个的点击事件

代码：写的有点乱，将就看吧 哈哈哈哈哈

// 在data中定义个弹窗实例
data () {
   return {
     instance: null // 通知弹窗实例
   }
 }

---------------------------------------------------------------------------------

            this.instance = this.$notify({
                dangerouslyUseHTMLString: true,
                showClose: false, // 关闭自带的关闭按钮
                duration: 0, 
                position: 'bottom-right',
                customClass: 'notifyClass',// 这个样式只能放在无scoped的style中才能生效
                message: this.$createElement(
                  'div',
                  {},
                  [
                    this.$createElement(
                      'div',
                      { class: 'notify_div' },
                      [
                        this.$createElement(
                          'div',
                          { class: 'notify_title' },
                          [
                            this.$createElement(
                              'i',
                              { class: 'el-icon-bell notifyIcon' }
                            ),
                            this.$createElement(
                              'span',
                              {},
                              '通知'
                            )
                          ]
                        ),
                        this.$createElement(
                          'i',
                          { class: 'el-icon-close', on: { click: this.closeNotify } }
                        )
                      ]
                    ),
                    this.$createElement(
                      'div',
                      {
                        domProps: {
                          innerHTML: htmlString // htmlString就是带HTML格式的字符串'你好啊'
                        },
                        class: 'notifyContent'
                      }
                    )
                  ]
                )
              })
----------------------------------------------------------------------------------------
    closeNotify () {
      this.instance.close() // 手动关闭通知
    }

----------------------------------------------------------------------
.notifyClass {
  background-color: #fdf6ec;
}
.notify_title {
  margin-bottom: 5px;
  font-weight: bold;
}
.notifyContent {
  color: #f75343;
  height: 100px;
  overflow-y: auto;
  padding-right: 6px;
  &::-webkit-scrollbar {
    width: 5px;
    height: 7px;
    background-color: #fff;
  }
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #fff;
  }
  &::-webkit-scrollbar-thumb {
    height: 20px;
    border-radius: 10px;
    background-color: #cccdd1;
  }
}
.notifyIcon {
  color: #f75343;
  margin-right: 5px;
}
.notify_div {
  display: flex;
  justify-content: space-between;
}