element中Notification组件（this.$notify）自定义样式

1、自定义样式效果 

2、vue代码 

this.notifications = this.$notify({
              title: '',
              dangerouslyUseHTMLString: true,
              duration: obj.remindMethod==='3' ? 0:4500,
              customClass: 'notify-warning',
              offset: 50,
              showClose: false,
              message: this.$createElement(
                "div",
                null,
                [
                this.$createElement(
                  "div",
                  {class:'alertTile'}
                ),
                this.$createElement(
                  "div",
                  {class:'alertTile_1'},
                  "报警"
                ),
                this.$createElement(
                  "div",
                  {class:'alertContant'},
                  [
                    this.$createElement(
                      "span",
                      "报警内容" + ":" + obj.data
                    ),
                    this.$createElement(
                      "br",
                      null,
                    ),
                    this.$createElement(
                      "div",
                      {class:'alertContant'},
                      "报警时间："+obj.time
                    ),
                  ]
                   
                ),
                this.$createElement(
                  "button",
                  {
                    class:'close_notify',
                    on: {
                      click: _this.closeNotify.bind(_this, obj.remindMethod),
                    },
                  },
                  obj.buttonName
                ),
                ]
              ),
            });

 3、CSS、不能用scoped修饰

4、自定义关闭按钮

//点击事件回调
    closeNotify(type) {
      console.log("hahah");
      console.log(type);
      if(type === '2'){
      console.log("自动关闭，流程。。");
      }
      if(type === '3'){
      console.log("手动确认，流程。。");
      }
      this.notifications.close();
    },

5、使用到的图片

alert_red_1.png alert_red_2.png alert_red_3.png baojing_box_red.png baojing_content_red.png

图片地址链接：

https://download.csdn.net/download/askuld/88282624