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

朱雀 2023-10-15 14:32 167阅读 0赞

## 1、自定义样式效果 ##

![3955ea99d77d4113a3a0f79d32523e9a.png][]

## 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、使用到的图片 ##

![76d0ecf631824679961e8743aab6d50f.png][] alert\_red\_1.png![8a391366077444b59860084e863ae327.png][] alert\_red\_2.png![4a94e08513d44a569c8a390e0cdbb868.png][] alert\_red\_3.png![41f0acdacba04386825f3b732cece591.png][] baojing\_box\_red.png![4c8e5928d67c48a2bf13925ffc2c6dde.png][] baojing\_content\_red.png

图片地址链接：

[https://download.csdn.net/download/askuld/88282624][https_download.csdn.net_download_askuld_88282624]

[3955ea99d77d4113a3a0f79d32523e9a.png]: https://img-blog.csdnimg.cn/3955ea99d77d4113a3a0f79d32523e9a.png
[76d0ecf631824679961e8743aab6d50f.png]: https://img-blog.csdnimg.cn/76d0ecf631824679961e8743aab6d50f.png
[8a391366077444b59860084e863ae327.png]: https://img-blog.csdnimg.cn/8a391366077444b59860084e863ae327.png
[4a94e08513d44a569c8a390e0cdbb868.png]: https://img-blog.csdnimg.cn/4a94e08513d44a569c8a390e0cdbb868.png
[41f0acdacba04386825f3b732cece591.png]: https://img-blog.csdnimg.cn/41f0acdacba04386825f3b732cece591.png
[4c8e5928d67c48a2bf13925ffc2c6dde.png]: https://img-blog.csdnimg.cn/4c8e5928d67c48a2bf13925ffc2c6dde.png
[https_download.csdn.net_download_askuld_88282624]: https://download.csdn.net/download/askuld/88282624