vue2 elememtUI 中Notification的自定义关闭按钮

最新推荐文章于 2024-03-23 09:44:48 发布

快乐的想念17

最新推荐文章于 2024-03-23 09:44:48 发布

阅读量708

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42178050/article/details/132491974

版权

    //显示通知
    async openNotice(list) {
      if (!list || list.length == 0) return;
      const h = this.$createElement;
      for (let i = 0; i < list.length; i++) {
        let notify = await this.$notify({
          title: "系统通知",
          message: h("p", null, [
            h("div", null, list[i].msgContent),
            h(
              "el-button",
              {
                props: {
                  type: "primary",
                  size: "mini",
                },
                on: {
                  click: () => {
                    this.getNoticeDetail(list[i].id);
                  },
                },
                style: {
                  border: "none",
                  textAlign: "center",
                  //width: "20%",
                  margin: "5% auto 0",
                  display: "flex",
                  justifyContent: "flex-end",
                  alignitems: "center",
                },
              },
              "确认已读"
            ),
          ]),
          position: "top-right",
          duration: 0,
          dangerouslyUseHTMLString: true,
          onClose: (e) => {
            //关闭后回调事件,关闭代表已读
          },
        });
        this.arr.push({
          id: list[i].id,
          notification: notify, // 将该vue对象存起来为了执行close方法
        });
      }
    },

   //确认已读
    getNoticeDetail(id) {
      const index = this.arr.findIndex((item) => {
        return item.id === id;
      });
      noticeDetail(id).then((res) => {
        this.$modal.msgSuccess("确认已读成功");
        if (index > -1) {
          this.arr[index].notification.close();//关闭弹框
          this.arr.splice(index, 1);
        }
        this.$store.commit("SET_NOTICENUMBER", this.noticeList.length - 1);
      });
    },