vue(element-ui组件) 的this.$notify的具体使用

javascript 复制代码

        getNotify() {
      this.noClose();
      let message = "";
      message = this.itemData.map((ele) => {
        const text = "任务" + ele.title + "新增" + ele.num + "条言论";
        return this.$createElement(
          "el-tooltip",
          {
            props: {
              content: text,
              placement: "top",
              disabled: text.length >= 34 ? false : true,
            },
            class: "item",
          },
          [
            this.$createElement(
              "div",
              {
                class: "detailText",
                on: {
                  click: () => this.skipDetails(ele),
                },
              },
              [
                this.$createElement("span", "任务"),
                this.$createElement(
                  "span",
                  { style: { color: "red" } },
                  `"` + ele.title + `"`
                ),
                this.$createElement("span", "新增"),
                this.$createElement(
                  "span",
                  { style: { color: "red" } },
                  ele.num
                ),
                this.$createElement("span", "条言论"),
              ]
            ),
          ]
        );
      });
      this.notifications = this.$notify({
        dangerouslyUseHTMLString: true,
        position: "bottom-right",
        duration: 0,
        showClose: false,
        message: this.$createElement(
          "div",
          {
            class: "contentAll",
            on: {
              scroll: () => this.onScroll, // 直接绑定滚动事件
            },
          },
          [
            this.$createElement(
              "div",
              { class: "contentHead" },
              // "这里是头部内容"
              [
                this.$createElement("div", { class: "my-custom-icon" }),
                this.$createElement(
                  "div",
                  { class: "my-custom-text" },
                  "预警通知"
                ),
                this.$createElement("div", {
                  class: "el-icon-close my-custom-close",
                  on: {
                    click: this.noClose.bind(),
                  },
                }),
              ]
            ),
            this.$createElement("div", { class: "contentDeatil" }, message),
          ]
        ),
      });
      setTimeout(() => {
        const _this = this;
        if (document.getElementsByClassName("contentAll")[0]) {
          document
            .getElementsByClassName("contentAll")[0]
            .addEventListener("mouseenter", _this.handleMouseEnter);
        }
      }, 20);
    },

注意：1、写css样式不能加scoped 要在后面加上 !important才生效

css 复制代码

  .contentAll {
    position: fixed;
  right: 0px;
  bottom: 0px;
  background-color: #fff;
  z-index: 2000 !important;
  width: 359px !important;
    .contentHead {
      width: 100%;
      height: 40px !important;
      background-color: #0087ff;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      padding-left: 20px;
      box-sizing: border-box;
      .my-custom-icon {
        width: 20px !important;
        height: 20px !important;
        background-image: url("~assets/images/allwarning/warning.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .my-custom-text {
        font-size: 18px;
        color: #ffffff;
        margin-left: 10px;
      }
      .my-custom-close {
        font-size: 18px;
        color: #ffffff;
        position: absolute;
        right: 15px;
        cursor: pointer;
      }
    }
    .contentDeatil {
      min-height: 100px !important;
      max-height: 280px !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      box-sizing: border-box;
      overflow: auto;
      .detailText {
        width: 100%;
        font-size: 16px !important;
        line-height: 30px !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }

2、大家有什么问题，可以在评论区评论