Custom Elements 如何自定义分页组件-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，分页组件是常见的 UI 组件之一。默认的分页组件可能不能完全满足我们的特定需求。此时，我们可以使用 Custom Elements 来自定义分页组件，让分页组件更加灵活和个性化。

什么是 Custom Elements？

Custom Elements 是 Web API 中的一个功能，在 Web Components 技术中起到关键作用。Custom Elements 允许开发者创建自定义元素，以及定义该元素的外观和行为。自定义元素可以是全新的元素，也可以是已有元素的扩展。

Custom Elements 优势

使用 Custom Elements 自定义分页组件，具有以下优势：

灵活性高：开发者可以根据具体需求灵活地定义分页组件的样式和功能。
可读性好：自定义元素的语义化清晰明了，开发者可以直观地理解该元素的作用。
封装性好：开发者可以使用 Shadow DOM 将自定义元素封装在影子 DOM 中，从而隔离自定义元素和外部环境之间的影响，提高组件的可复用性和安全性。

如何自定义分页组件？

下面我们通过编写一个自定义分页组件的示例来详细介绍如何使用 Custom Elements。

首先，我们需要定义一个自定义元素，命名为 custom-pagination。代码如下：

// javascriptcn.com 代码示例
class CustomPagination extends HTMLElement {
  constructor() {
    super();
    // 分页组件的属性
    this.currentPage = 1;     // 当前页
    this.totalPages = 10;     // 总页数
    this.pageSize = 10;       // 每页显示的数量
    this.maxPageButtons = 5;  // 最多显示的页码按钮数
    // 分页组件的样式
    this.style.display = 'flex';
    this.style.justifyContent = 'center';
    this.style.alignItems = 'center';
  }
  // 更新分页组件
  update() {
    // TODO
  }
}

// 定义自定义元素
customElements.define('custom-pagination', CustomPagination);

在上述代码中，我们定义了一个名为 CustomPagination 的自定义元素，并在构造函数中定义了分页组件的属性和样式。我们还定义了一个 update 方法，用于更新分页组件的显示。

接下来，我们需要在自定义元素中添加 Shadow DOM，并在其中渲染分页组件的 HTML 和 CSS。代码如下：

// javascriptcn.com 代码示例
class CustomPagination extends HTMLElement {
  constructor() {
    super();
    // 分页组件的属性
    this.currentPage = 1;     // 当前页
    this.totalPages = 10;     // 总页数
    this.pageSize = 10;       // 每页显示的数量
    this.maxPageButtons = 5;  // 最多显示的页码按钮数
    // 分页组件的样式
    this.style.display = 'flex';
    this.style.justifyContent = 'center';
    this.style.alignItems = 'center';
    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });
    // 渲染分页组件的 HTML 和 CSS
    shadow.innerHTML = `
      <style>
        .pagination {
          display: flex;
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .pagination li {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 0.5rem;
          padding: 0.5rem 1rem;
          cursor: pointer;
          color: #333;
          border: 1px solid #ccc;
          border-radius: 20px;
          font-size: 1rem;
          user-select: none;
        }
        .pagination li.active {
          background-color: #333;
          color: #fff;
        }
        .pagination li.disabled {
          cursor: not-allowed;
          color: #ccc;
          border: 1px solid #ccc;
        }
      </style>
      <ul class="pagination">
        <li class="prev">«</li>
        <li class="page" data-page="1">1</li>
        <li class="page" data-page="2">2</li>
        <li class="page" data-page="3">3</li>
        <li class="page" data-page="4">4</li>
        <li class="page" data-page="5">5</li>
        <li class="next">»</li>
      </ul>
    `;
  }
  // 更新分页组件
  update() {
    // TODO
  }
}

// 定义自定义元素
customElements.define('custom-pagination', CustomPagination);

在上述代码中，我们使用 attachShadow 方法创建了 Shadow DOM，并在其中渲染了分页组件的 HTML 和 CSS。我们使用了 ul 和 li 标签来定义分页组件的结构，为每个页码按钮添加了 page 类名和 data-page 属性，用于标识页码按钮对应的页码。我们还添加了 prev 和 next 类名，用于表示上一页和下一页按钮。

接下来，我们需要在自定义元素中添加事件监听器，用于响应上一页、下一页和页码按钮的点击事件。代码如下：

// javascriptcn.com 代码示例
class CustomPagination extends HTMLElement {
  constructor() {
    super();
    // 分页组件的属性
    this.currentPage = 1;     // 当前页
    this.totalPages = 10;     // 总页数
    this.pageSize = 10;       // 每页显示的数量
    this.maxPageButtons = 5;  // 最多显示的页码按钮数
    // 分页组件的样式
    this.style.display = 'flex';
    this.style.justifyContent = 'center';
    this.style.alignItems = 'center';
    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });
    // 渲染分页组件的 HTML 和 CSS
    shadow.innerHTML = `
      <style>
        .pagination {
          display: flex;
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .pagination li {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 0.5rem;
          padding: 0.5rem 1rem;
          cursor: pointer;
          color: #333;
          border: 1px solid #ccc;
          border-radius: 20px;
          font-size: 1rem;
          user-select: none;
        }
        .pagination li.active {
          background-color: #333;
          color: #fff;
        }
        .pagination li.disabled {
          cursor: not-allowed;
          color: #ccc;
          border: 1px solid #ccc;
        }
      </style>
      <ul class="pagination">
        <li class="prev">«</li>
        <li class="page" data-page="1">1</li>
        <li class="page" data-page="2">2</li>
        <li class="page" data-page="3">3</li>
        <li class="page" data-page="4">4</li>
        <li class="page" data-page="5">5</li>
        <li class="next">»</li>
      </ul>
    `;
    // 添加事件监听器
    shadow.addEventListener('click', e => {
      const target = e.target;
      if (target.classList.contains('prev')) {
        this.currentPage -= 1;
        if (this.currentPage < 1) {
          this.currentPage = 1;
        }
        this.update();
      } else if (target.classList.contains('next')) {
        this.currentPage += 1;
        if (this.currentPage > this.totalPages) {
          this.currentPage = this.totalPages;
        }
        this.update();
      } else if (target.classList.contains('page')) {
        const page = parseInt(target.dataset.page);
        if (page !== this.currentPage) {
          this.currentPage = page;
          this.update();
        }
      }
    });
  }
  // 更新分页组件
  update() {
    const pages = this.generatePages();
    const pagination = this.shadowRoot.querySelector('.pagination');
    pagination.innerHTML = '';
    pagination.appendChild(pages);
  }
  // 生成页码按钮
  generatePages() {
    const pages = document.createDocumentFragment();
    const startPage = Math.max(1, this.currentPage - Math.floor(this.maxPageButtons / 2));
    const endPage = Math.min(startPage + this.maxPageButtons - 1, this.totalPages);
    for (let i = startPage; i <= endPage; i++) {
      const li = document.createElement('li');
      li.classList.add('page');
      li.dataset.page = i;
      li.textContent = i;
      if (i === this.currentPage) {
        li.classList.add('active');
      }
      pages.appendChild(li);
    }
    return pages;
  }
}

// 定义自定义元素
customElements.define('custom-pagination', CustomPagination);

在上述代码中，我们通过 addEventListener 方法为分页组件的 Shadow DOM 添加了 click 事件监听器，用于响应上一页、下一页和页码按钮的点击事件。当用户点击上一页按钮时，将当前页数减 1，并调用 update 方法更新分页组件；当用户点击下一页按钮时，将当前页数加 1，并调用 update 方法更新分页组件；当用户点击页码按钮时，将当前页数设置为点击按钮对应的页码，并调用 update 方法更新分页组件。

在 update 方法中，我们调用了 generatePages 方法生成页码按钮，并将其添加到分页组件的 Shadow DOM 中。generatePages 方法计算出需要显示的页码范围，并生成相应的页码按钮，为当前页码按钮添加 active 类名，以便高亮显示。

最后，我们可以在 HTML 文件中使用自定义分页组件。代码如下：

<body>
  <custom-pagination></custom-pagination>
  <script>
    const pagination = document.querySelector('custom-pagination');
    pagination.update();
  </script>
</body>

在上述代码中，我们使用 <custom-pagination></custom-pagination> 标签引入了自定义分页组件，通过 querySelector 方法获取该元素，并调用 update 方法更新分页组件。

总结

通过上述示例，我们可以看到使用 Custom Elements 自定义分页组件的方法非常简单，但是我们可以通过添加更多的样式和功能，使其变得更加灵活、好看和易用。使用 Custom Elements 自定义分页组件，不仅可以提高组件的灵活性、可读性和可复用性，而且还可以提高开发效率和技术竞争力。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65495eb67d4982a6eb38a6a3