需要形容

  1. 需要：依据传入的动静数组生成一个节点数为数组长度的 slider 组件。要求节点间接长度统一，然而显示的值为传入数组的值。
  2. 示例：
    传入值为[5], 因为只有一个值，slider 无奈拖动，显示如下
    传入值为[5，10，20，30，40，50，55]， 数值之间差值不肯定相等，显示如下
  3. 实现逻辑：
    UI：
    先画一条线作为滑动条，再依据传入数组长度来动静生成相应节点数, 通过滑动条线的长度÷数组长度来动静生成节点之间宽度。 把生成的点笼罩在线下面，最初进行分段。

Demo

意外解决

问题：

在实现过程中，有遇到一个问题：在父组件页面还没有加载完的时候，曾经在执行 slider 组件的initDynamicMargin()办法。 此时，无奈拿到 slider 宽度，来计算相应的dotMargin

解决办法：

通过Promise来写一个waitElement()办法，等页面 slider 加载实现之后，再去计算节点之间的宽度。

代码实现如下：

  private waitElement(selector: string) {    return new Promise<void>((resolve) => {      if (document.querySelector(selector)) {        resolve();      }      const observer = new MutationObserver((mutations) => {        if (document.querySelector(selector)) {          resolve();          observer.disconnect();        }      });      observer.observe(document.body, {        childList: true,        subtree: true,      });    });  }    ngAfterViewInit() {    // Fix issue: Calculate dotmargin before loaded    this.waitElement('#container').then(() => {      this.initDynamicMargin();    });  }

Github 地址

https://github.com/emonZan/an...