How to use the heyui/src/utils/utils.addClass function in heyui

window.setTimeout(() => {
      utils.addClass($body, notifyShowCls);
      if (param.hasMask) {
        let body = document.documentElement;
        let scrollWidth = window.innerWidth - body.clientWidth;
        body.style.overflow = 'hidden';
        body.style.paddingRight = `${scrollWidth}px`;
      }
    }, 20);

tbody.addEventListener('mouseover', (event) => {
          let tr = null;
          let target = event.target;
          while (target.parentNode != window.document.body) {
            if (target.tagName == 'TH') {
              return;
            } else if (target.tagName == 'TR') {
              tr = target;
              break;
            }
            target = target.parentNode;
          }
          if (tr) {
            utils.addClass(tr, 'h-table-tr-hovered');
            let index = tr.getAttribute('trIndex');
            for (let el of this.$el.querySelectorAll(`.h-table-tbody>tr[trIndex='${index}']`) || []) {
              utils.addClass(el, 'h-table-tr-hovered');
            }
          }
        }, false);
        tbody.addEventListener('mouseout', (event) => {

if (!this.popNode) {
      this.initPopNode();
    }
    if (!this.popperInstance) {
      this.initPopper();
    }
    this.popperInstance.enableEventListeners();
    if (!this.popNode) {
      return;
    }
    if (this.options.equalWidth) {
      this.popNode.style.width = `${this.reference.clientWidth}px`;
    }

    this.popNode.style.display = '';
    utils.addClass(this.reference, 'h-pop-trigger');
    this.showTimeout = setTimeout(() => {
      this.popNode.setAttribute('aria-hidden', 'false');
      this.popperInstance.update();
    }, 0);
    return this;
  }

mousedown(type, event) {
      if (this.readonly) return;
      utils.addClass(event.target, 'h-slider-node-dragging');
      this.eventControl.type = type;
      this.eventControl.x = event.clientX;
      this.eventControl.init = this.values[type];
      document.body.addEventListener('mousemove', this.mousemove);
      document.body.addEventListener('mouseup', this.mouseup);
      document.body.addEventListener('click', this.click);
      if (this.tooltip[type]) this.tooltip[type].show();
    },
    mouseup(event) {

this.loading(100, 100, () => {
      if (!success) {
        utils.addClass(this.inner, 'error');
      }
      setTimeout(() => {
        utils.removeClass(this.inner, 'loading');
        utils.removeClass(this.inner, 'error');
        this.inner.style.width = '0';
        this.width = 0;
      }, 200);
    });
  }

if (!content) {
      return this;
    }

    const popNode = this.create(reference, options.template, content, options.html);

    popNode.setAttribute('aria-describedby', popNode.id);
    this.reference.setAttribute('aria-describe', popNode.id);
    const container = this.findContainer();

    container.appendChild(popNode);
    if (options.class) {
      utils.addClass(popNode, options.class);
    }
    if (options.className) {
      utils.addClass(popNode, options.className);
    }

    const contentNode = popNode.querySelector(this.innerSelector);
    log(contentNode, options.maxWidth);
    if (contentNode && options.maxWidth) {
      contentNode.style.maxWidth = `${options.maxWidth}px`;
    }

    this.popNode = popNode;
    this.popNode.setAttribute('aria-hidden', 'true');

    if (this.options.trigger.indexOf('hover') > -1) {
      this.setPopNodeEvent();
    }
  }

function Notice(originalParam) {
  if (!noticeDom) {
    noticeDom = document.createElement('div');
    utils.addClass(noticeDom, `${prefixCls}-container`);
    document.body.appendChild(noticeDom);
  }

  let param = {
    type: prefixCls,
    hasCloseIcon: true,
    parent: noticeDom
  };
  if (Object.keys(iconNames).indexOf(originalParam.type) != -1) {
    if (originalParam.title) originalParam.style = `${prefixCls}-has-icon`;
    originalParam.content = `<i class="${iconPrefixCls}-${iconNames[originalParam.type]} ${iconColor[originalParam.type]}-color"></i>${originalParam.content}`;
    delete originalParam.type;
  } else if (originalParam.icon) {
    if (originalParam.title) originalParam.style = `${prefixCls}-has-icon`;
    originalParam.content = `<i class="${originalParam.icon}"></i>${originalParam.content}`;
  }

let options = this.options;
    const content = options.content || reference.getAttribute('content');

    if (!content) {
      return this;
    }

    const popNode = this.create(reference, options.template, content, options.html);

    popNode.setAttribute('aria-describedby', popNode.id);
    this.reference.setAttribute('aria-describe', popNode.id);
    const container = this.findContainer();

    container.appendChild(popNode);
    if (options.class) {
      utils.addClass(popNode, options.class);
    }
    if (options.className) {
      utils.addClass(popNode, options.className);
    }

    const contentNode = popNode.querySelector(this.innerSelector);
    log(contentNode, options.maxWidth);
    if (contentNode && options.maxWidth) {
      contentNode.style.maxWidth = `${options.maxWidth}px`;
    }

    this.popNode = popNode;
    this.popNode.setAttribute('aria-hidden', 'true');

    if (this.options.trigger.indexOf('hover') > -1) {
      this.setPopNodeEvent();

update(el, binding) {
      let color = binding.value || binding.arg || binding.expression;
      if (color.startsWith('#')) {
        el.style.color = color;
      } else {
        utils.addClass(el, `${color}-color`);
      }
    },
    unbind(el) {