How to use @antv/dom-util - 10 common examples

const containerTpl = this.get('containerTpl');
    const outterNode = this.get('canvas').get('el').parentNode;
    let container;
    if (!this.get('htmlContent')) {
      if (/^\#/.test(containerTpl)) {
        // 如果传入 dom 节点的 id
        const id = containerTpl.replace('#', '');
        container = document.getElementById(id);
      } else {
        container = domUtil.createDom(containerTpl);
      }
    } else {
      container = this._getHtmlContent();
    }
    this.set('container', container);
    domUtil.modifyCSS(container, this.style[CONTAINER_CLASS]);
    outterNode.appendChild(container);
    outterNode.style.position = 'relative';
  }

public _init_() {
    const containerTpl = this.get('containerTpl');
    const outterNode = this.get('canvas').get('el').parentNode;
    let container;
    if (!this.get('htmlContent')) {
      if (/^\#/.test(containerTpl)) {
        // 如果传入 dom 节点的 id
        const id = containerTpl.replace('#', '');
        container = document.getElementById(id);
      } else {
        container = domUtil.createDom(containerTpl);
      }
    } else {
      container = this._getHtmlContent();
    }
    this.set('container', container);
    domUtil.modifyCSS(container, this.style[CONTAINER_CLASS]);
    outterNode.appendChild(container);
    outterNode.style.position = 'relative';
  }

public forceFit() {
    if (this.destroyed) {
      return;
    }
    const width = domUtil.getWidth(this.domContainer);
    const height = this.height;
    if (width !== this.domWidth) {
      const canvas = this.canvas;
      canvas.changeSize(width, height); // 改变画布尺寸
      if (this.bgChart) {
        this.bgChart.changeSize(width, this.bgChart.get('height'));
      }
      canvas.clear();
      this._initWidth();
      this._initSlider(); // 初始化滑动条
      this._bindEvent();
      canvas.draw();
    }
  }
  public _initForceFitEvent() {

const position = this.parsePoint(coord, this.get('position'));
    const parentNode: HTMLElement = container.get('canvas').get('el').parentNode;
    const wrapperNode: HTMLElement = domUtil.createDom('<div class="guide-annotation"></div>');
    parentNode.appendChild(wrapperNode);

    let html: any = this.get('html');
    if (_.isFunction(html)) {
      const xScales = this.get('xScales');
      const yScales = this.get('yScales');
      html = html(xScales, yScales);
    }
    // 判断 html 是 Html element 还是 html string
    const htmlNode: HTMLElement = _.isElement(html) ? html : domUtil.createDom(html);
    wrapperNode.appendChild(htmlNode);

    domUtil.modifyCSS(wrapperNode, {
      position: 'absolute', // to fix dom in the document stream to get the true width
    });

    this.setDomPosition(wrapperNode, htmlNode, position);
    this.set('el', wrapperNode);
  }

const itemDiv = Util.substitute(
      itemTpl,
      Util.mix(
        // @ts-ignore
        {
          // @ts-ignore
          index,
        },
        item
      )
    );
    const itemDOM = domUtil.createDom(itemDiv);
    domUtil.modifyCSS(itemDOM, this.style[LIST_ITEM_CLASS]);
    const markerDom = find(itemDOM, MARKER_CLASS);
    if (markerDom) {
      domUtil.modifyCSS(markerDom, this.style[MARKER_CLASS]);
    }
    const valueDom = find(itemDOM, VALUE_CLASS);
    if (valueDom) {
      domUtil.modifyCSS(valueDom, this.style[VALUE_CLASS]);
    }
    return itemDOM;
  }

if (reversed) {
      items.reverse();
    }

    let itemGroupContainer = _findNodeByClass(legendContainer, `${prefixClassName}-list`);
    if (!itemGroupContainer) {
      itemGroupContainer = domUtil.createDom(`<ul class="${prefixClassName}-list"></ul>`);
    }
    const listStyle = Util.deepMix({}, DEFAULT_THEME.listStyle, this.get('listStyle'));
    if (layout === 'horizontal') {
      // 使 itemGroupContainer 内容不换行，计算分页时才能比较 scrollWidth 和 offsetWidth 的大小。
      // @todo ie是否会有兼容问题？
      listStyle.width = 'max-content';
    }
    domUtil.modifyCSS(itemGroupContainer, listStyle);

    // 用于支持分页逻辑
    const clipContainer = domUtil.createDom('<div></div>');
    legendContainer.appendChild(clipContainer);
    clipContainer.appendChild(itemGroupContainer);

    this.set('_clipContainer', clipContainer);
    this.set('_itemGroupContainer', itemGroupContainer);

    let itemTpl = this.get('itemTpl');
    if (!itemTpl) {
      itemTpl = `<li class="${prefixClassName}-item">
      <span class="${prefixClassName}-item-marker"></span>
      <span class="${prefixClassName}-item-text"></span>
      </li>`;
    }

cursor: 'pointer',
        border: `${paginationCfg.activeColor} solid`,
        borderWidth: '2px 2px 0 0',
        width: `${paginationCfg.arrowSize}px`,
        height: `${paginationCfg.arrowSize}px`,
      };
      const inactiveStyle = {
        cursor: 'default',
        border: `${paginationCfg.inactiveColor} solid`,
        borderWidth: '2px 2px 0 0',
        width: `${paginationCfg.arrowSize}px`,
        height: `${paginationCfg.arrowSize}px`,
      };

      domUtil.modifyCSS(prePageButton, inactiveStyle);
      domUtil.modifyCSS(nextPageButton, activeStyle);
      if (paginationCfg.animation) {
        // 允许分页的滚动动画
        domUtil.modifyCSS(itemGroupContainer, {
          transition: 'transform .3s ease-in',
        });
      }

      let currentPage = 1;
      let translateX = 0;
      prePageButton.onclick = () => {
        if (currentPage === 1) {
          return;
        }
        currentPage -= 1;
        translateX += deltaWidth;
        currentPageNum.innerHTML = currentPage;

// 初始化 HTML dom
    const fontFamily = this.get('fontFamily');
    // const width = this.get('width');
    // const height = this.get('height');
    const layout = this.get('layout');
    const maxWidth = this.get('maxWidth');
    const maxHeight = this.get('maxHeight');
    const prefixClassName = this.get('prefixClassName');
    let containerTpl = this.get('containerTpl');
    if (!containerTpl) {
      containerTpl = `<div class="${prefixClassName}">
        <div class="${prefixClassName}-title"></div>
        <ul class="${prefixClassName}-list"></ul>
      </div>`;
    }
    const legendContainer = domUtil.createDom(containerTpl);
    const backgroundStyle = Util.deepMix({}, DEFAULT_THEME.backgroundStyle, this.get('backgroundStyle'));
    domUtil.modifyCSS(legendContainer, {
      fontFamily,
      maxHeight: `${maxHeight}px`,
      // width: 'auto',
      width: '100%',
      height: 'auto',
      ...backgroundStyle,
    });
    if (layout === 'horizontal') {
      domUtil.modifyCSS(legendContainer, {
        maxWidth: `${maxWidth}px`,
      });
    }

    let container = this.get('container');

style="display:inline-block;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 2px;">
        
        <span class="current-page-number">1</span> /  <span class="total-page-number">0</span>
        <div style="display:inline-block;-webkit-transform: rotate(45deg);transform: rotate(45deg);margin-right: 2px;" class="next-page">
        </div>
      
    `; // 分页器结构模板，目前不允许自定义

    if (pagination &amp;&amp; legendContainer.scrollHeight &gt; legendContainer.offsetHeight) {
      // 满足分页条件
      domUtil.modifyCSS(legendContainer, {
        overflow: 'hidden',
        height: `${this.get('maxHeight')}px`,
      }); // 如果允许分页，则禁止滚动
      const paginationDom = domUtil.createDom(paginationDomStr);
      legendContainer.appendChild(paginationDom);

      const legendContainerHeight = this.getHeight(); // legend 容器的高度
      const titleHeight = this.get('_titleContainer') ? domUtil.getOuterHeight(this.get('_titleContainer')) : 0; // Legend 标题的高度
      const paginationHeight = domUtil.getOuterHeight(paginationDom); // 分页器的高度
      const itemGroupContainerHeight = legendContainerHeight - titleHeight - paginationHeight; // 获取图例项容器的可视高度
      const itemGroupContainerOffsetHeight = itemGroupContainer.offsetHeight; // 获取图例项实际的高度

      // 剪切区域的样式设置
      const clipContainer = this.get('_clipContainer');
      domUtil.modifyCSS(clipContainer, {
        maxHeight: `${itemGroupContainerHeight}px`,
        overflow: 'hidden',
      });

      const pageSize = Math.ceil(itemGroupContainerOffsetHeight / itemGroupContainerHeight); // 计算页数

public _addItem(item: ToolTipContentItem, index: number) {
    const itemTpl = this.get('itemTpl'); // TODO: 有可能是个回调函数
    const itemDiv = Util.substitute(
      itemTpl,
      Util.mix(
        // @ts-ignore
        {
          // @ts-ignore
          index,
        },
        item
      )
    );
    const itemDOM = domUtil.createDom(itemDiv);
    domUtil.modifyCSS(itemDOM, this.style[LIST_ITEM_CLASS]);
    const markerDom = find(itemDOM, MARKER_CLASS);
    if (markerDom) {
      domUtil.modifyCSS(markerDom, this.style[MARKER_CLASS]);
    }
    const valueDom = find(itemDOM, VALUE_CLASS);
    if (valueDom) {
      domUtil.modifyCSS(valueDom, this.style[VALUE_CLASS]);
    }
    return itemDOM;
  }