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

最新推荐文章于 2024-10-24 11:31:17 发布

ccc_cccc_ccc

最新推荐文章于 2024-10-24 11:31:17 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/ccc_cccc_ccc/article/details/106276430

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中利用定时器实现每2秒向后端请求异常日志，并结合Element UI的notify功能，创建一个自定义样式的提示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系统要实现一个简单的异常日志提示框，决定使用定时器，每隔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" });
    },
     },