需求描述

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...