Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义的 HTML 元素，并且可以通过 JavaScript 来控制这些元素的行为。在本文中，我们将介绍如何使用 Custom Elements 创建一个分页控件。
什么是分页控件？
分页控件是指在一个长列表或表格中，将其分为多个页面，每个页面显示一定数量的数据，方便用户浏览。通常，分页控件包括页码、上一页、下一页、跳转到指定页码等功能。
使用 Custom Elements 创建分页控件
首先，我们需要创建一个自定义元素，这个元素将包含分页控件的所有功能。我们可以使用 class 或 prototype 来定义这个元素的行为。
class Pagination extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
}
customElements.define("my-pagination", Pagination);以上代码定义了一个名为 my-pagination 的自定义元素，它继承自 HTMLElement，并且使用 attachShadow 方法创建了一个 shadow DOM，用于封装分页控件的样式和行为。
接下来，我们可以在 constructor 方法中添加一些属性和方法，用于控制分页控件的行为。
// www.javascriptcn.com code example
class Pagination extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.currentPage = 1;
this.pageSize = 10;
this.totalPages = 0;
this.render();
}
render() {
// 渲染分页控件
}
setPage(page) {
// 设置当前页码
}
nextPage() {
// 显示下一页数据
}
prevPage() {
// 显示上一页数据
}
}
customElements.define("my-pagination", Pagination);以上代码定义了 currentPage、pageSize 和 totalPages 属性，分别表示当前页码、每页显示的数据量和总页数。同时，定义了 render、setPage、nextPage 和 prevPage 方法，用于渲染分页控件、设置当前页码、显示下一页和上一页数据。
接下来，我们可以在 render 方法中使用 HTML 和 CSS 来渲染分页控件。
// www.javascriptcn.com code example
class Pagination extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.currentPage = 1;
this.pageSize = 10;
this.totalPages = 0;
this.render();
}
render() {
this.shadowRoot.innerHTML = `
<style>
/* 分页控件样式 */
</style>
<div class="pagination">
<button id="prev">上一页</button>
<span>第 ${this.currentPage} 页，共 ${this.totalPages} 页</span>
<button id="next">下一页</button>
</div>
`;
}
setPage(page) {
// 设置当前页码
}
nextPage() {
// 显示下一页数据
}
prevPage() {
// 显示上一页数据
}
}
customElements.define("my-pagination", Pagination);以上代码使用了 HTML 和 CSS 来渲染了一个简单的分页控件，包括上一页、下一页和当前页码等功能。我们可以在 setPage、nextPage 和 prevPage 方法中添加具体的实现逻辑。
示例代码
// www.javascriptcn.com code example
class Pagination extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.currentPage = 1;
this.pageSize = 10;
this.totalPages = 0;
this.render();
}
render() {
this.shadowRoot.innerHTML = `
<style>
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
button {
border: none;
background-color: #f5f5f5;
padding: 10px;
margin: 0 10px;
cursor: pointer;
}
button:hover {
background-color: #eaeaea;
}
</style>
<div class="pagination">
<button id="prev">上一页</button>
<span>第 ${this.currentPage} 页，共 ${this.totalPages} 页</span>
<button id="next">下一页</button>
</div>
`;
this.prevButton = this.shadowRoot.querySelector("#prev");
this.nextButton = this.shadowRoot.querySelector("#next");
this.prevButton.addEventListener("click", () => {
this.prevPage();
});
this.nextButton.addEventListener("click", () => {
this.nextPage();
});
}
setPage(page) {
if (page < 1 || page > this.totalPages) {
return;
}
this.currentPage = page;
this.render();
}
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
this.render();
}
}
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
this.render();
}
}
static get observedAttributes() {
return ["current-page", "page-size", "total-pages"];
}
attributeChangedCallback(name, oldValue, newValue) {
switch (name) {
case "current-page":
this.currentPage = parseInt(newValue);
break;
case "page-size":
this.pageSize = parseInt(newValue);
break;
case "total-pages":
this.totalPages = parseInt(newValue);
break;
}
this.render();
}
}
customElements.define("my-pagination", Pagination);以上代码定义了一个名为 my-pagination 的自定义元素，它包含了分页控件的所有功能，包括上一页、下一页、跳转到指定页码等。我们可以使用以下 HTML 代码来使用这个自定义元素。
<my-pagination current-page="1" page-size="10" total-pages="100"></my-pagination>
以上代码创建了一个分页控件，每页显示 10 条数据，共有 100 页数据。我们可以通过修改 current-page、page-size 和 total-pages 属性来改变分页控件的行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8e18aa941bf7134fd91cb