vue-定时器-element的notify提示框-自定义样式

系统要实现一个简单的异常日志提示框，决定使用定时器，每隔2秒向后端发送请求
效果图：

登录后，开启定时器

data() {
     
    return {
     
      isExistNo: false,
      timer:null, //定时器名称
    };
  },

created() {
     
    const _this = this;
    this.timer = window.setInterval(() => {
     
        _this.$api.post(_this.$lesUiPath.msgAlert).then(result => {
     
          if (result !== "") {
     
            if (_this.isExistNo) {
     
              // console.log("已存在提示框...");
            } else {
     
              _this.isShowNotify(result);
              _this.isExistNo = true;
            }
          }
        });
    }, 2000);
    // 通过$once来监听定时器
    // 在beforeDestroy钩子触发时清除定时器
    this.$once("hook:beforeDestroy", () => {
     
      window.clearInterval(this.timer);
      this.timer = null;
      // console.log("离开页面，定时器销毁...")
    });
  },

  methods: {
     
    isShowNotify(result) {
     
      this.$notify({
     
        title: "提示",
        type: "warning",
        dangerouslyUseHTMLString: true,
        onClose: () => {
     
          // console.log("点击关闭...");
          this.isExistNo = false;
        },
        message: this.$createElement("div", null, [
          this.$createElement("div", null, [
            this.$createElement("span", null, result)
          ]),
          this.$createElement("div", null, [
            this.$createElement(
              "button",
              {
     
                style: {
     
                  padding: "8px 16px",
                  margin: "10px 12px 0px 2px",
                  textAlign: "center",
                  textDecoration: "none",
                  display: "inline-block",
                  webkitTransitionDuration: "0.4s",
                  transitionDuration: "0.4s",
                  cursor: "pointer",
                  backgroundColor: "#ea8f28",
                  color: "white",
                  // border: '2px solid ##ea8f28',
                  borderRadius: "6px"
                },
                on: {
     
                  click: () => {
     
                    this.go(result);
                  },
                  mouseout: function(e) {
     
                    e.target.style.backgroundColor = "#ea8f28";
                    // e.target.style.border = '2px solid #ea8f28';
                  },
                  mouseover: function(e) {
     
                    e.target.style.backgroundColor = "rgba(234, 143, 40, 0.8)";
                  }
                }
              },
              "立即处理"
            )
          ])
        ]),
        duration: 0,
        position: "bottom-right"
      });
    },
    go(data) {
     
      this.$router.push({
      path: "/a/b/c" });
    },
     },