element UI Notification通知上添加按钮和点击事件

最新推荐文章于 2024-07-30 13:55:59 发布

知所云

最新推荐文章于 2024-07-30 13:55:59 发布

阅读量7.4k

点赞数 4

文章标签： vue js

本文链接：https://blog.csdn.net/qq_32881447/article/details/112766816

版权

在Element UI的Notification通知组件中，为实现消息通知时的按钮功能，可以像添加链接（a标签）那样添加按钮。点击这些按钮后，不仅能够触发相应的跳转操作，同时关闭当前通知。此功能扩展了Notification的通知交互，增强了用户体验。

摘要由CSDN通过智能技术生成

需求：消息通知的时候需要有更多的点击按钮，进行跳转

            const h = this.$createElement;
            const notify = this.$notify({
              title: data.type,
              message: h(
                "p",
                {
                  style:"width: 250px;display: flex;justify-content: space-between;",
                },
                [
                  h("span", null, data.content),
                  h(
                    "a",
                    {
                      style: "color: #409EFF;cursor: pointer;",
                      on: {
                        click: this.goToMore,
                      },
                    },
                    "更多"
                  ),
                ]
              ),
              position: "bottom-right",
              type: "warning",
              duration: 10000,
              customClass: "custom-class",
            });
            this.notify[data.id] = notify;

添加button 和添加a标签一样
跳转的时候要将通知关闭

 goToMore() {
      let _this = this;
      for (let key in _this.notify) {
        _this.notify[key].close();
        delete _this.notify[key];
      } //关闭全部通知
      this.$router.push("/earlyWarning/index");
    },