如何使用 Custom Elements 和 Bootstrap 创建自定义分页器组件

前言

在日常的前端开发中，分页器是一个非常常见的组件。虽然 Bootstrap 提供了默认的分页器组件，但是在某些应用场景中，我们往往需要更加个性化的分页器组件，以符合业务需要。本文将介绍如何使用 Custom Elements 和 Bootstrap，创建一个高度自定义的分页器组件，以及相关的技术细节和实现方案。

准备工作

在开始编写自定义分页器组件之前，需要准备以下几个工具和技术：

  1. Bootstrap 4
  2. Custom Elements

在本文中，我们将使用 Bootstrap 4 来构建分页器的样式，同时使用 Custom Elements 来实现分页器的自定义组件。

分页器组件的基本结构

在开始编写组件之前，首先需要明确分页器组件的基本结构。一个基本的分页器组件应该包含以下几个部分：

  1. 上一页按钮
  2. 下一页按钮
  3. 当前页码的输入框
  4. 跳转到指定页码的按钮

下面是一个简单的示意图：

在分页器组件中，我们需要提供以下一些属性：

  1. page：表示当前页码，需要和输入框中的值进行同步。
  2. pageSize：表示每页展示的数据条数。
  3. total：表示数据总条数。
  4. showQuickJumper：是否展示跳转输入框和按钮。

编写分页器组件

1. 创建 Custom Element

首先，我们需要创建一个 Custom Element，用于代表分页器组件。我们给这个元素定义一个 pagination-element 的标签名：

--------- -------------------------
  ---- -------------------
    ---- ---------- ---
  ------
-----------

--------
  ----- ----------------- ------- ----------- -
    ------------- -
      --------
      ----- -------- - -------------------------------------------------------
      ----------- - ------------------- ----- ------ --
        ---------------------------------------
    -
  -
  ------------------------------------------- -------------------
---------

在以上代码中，我们使用了 attachShadow 方法来创建了一个 Shadow DOM，将模板插入到其中。接下来我们就可以在模板中编写分页器组件的具体结构了。

2. 编写分页器的基本结构

在模板中，我们可以结合 Bootstrap 4 的样式，编写一个最基本的分页器结构：

---- ---------- ---
-------
  ----------- -
    -------- -----
    ---------------- -------
    ------------ -------
    ------- ---- --
  -

  ---------- -
    -------- -------------
    -------- - -----
    ---------- -----
    ------------ ----
    ------- --- ----- --------
    -------------- ----
    ------ -----
  -

  ----------------- -
    ------ -----
    ----------------- --------
    ------------- --------
    ------- --------
  -

  ------------------- -
    ------ -----
    ----------------- -----
    ------------- --------
    ------- ------------
  -
--------

---- -------------------
  --- -------------------
    --- ------------------
      -- ----------------- ----------------
    -----

    --- ---------------- --------
      -- ----------------- --------------
    -----

    --- ------------------
      -- ----------------- --------------
    -----

    --- ------------------
      -- ----------------- --------------
    -----

    --- ---------------- ----------
      -- ----------------- ----------------
    -----

    --- ------------------
      -- ----------------- --------------
    -----

    --- ------------------
      -- ----------------- ----------------
    -----
  -----
------

以上分页器结构包含了分页器的基本元素，即上一页、下一页按钮，以及页码列表。注意，在列表中，我们添加了一个 ... 的占位符，方便展示更多的页码。

3. 实现分页器组件的功能

有了基本的结构之后，接下来我们需要对这个分页器组件进行功能实现。具体来说，我们需要添加以下一些功能：

  1. 上一页和下一页功能
  2. 页码列表渲染
  3. 当前页码输入框和跳转功能

上一页和下一页功能

--- ------------------
  -- ----------------- -------- -----------------
-----

--- ------------------
  -- ----------------- -------- -----------------
-----

通过给上一页和下一页的按钮添加一个 id 值，我们可以方便地通过 JavaScript 获取这个节点，然后给这个节点添加一个点击事件。

------------- -
  --------
  ----- -------- - -------------------------------------------------------
  ----------- - ------------------- ----- ------ --
    ---------------------------------------

  -- ----------------
  ----------------------------------
    -------------------------- --------------------------
  ----------------------------------
    -------------------------- --------------------------
-

---------- -
  -- -----
-

---------- -
  -- -----
-

接下来，我们还需要给每一个 page-item 添加一个点击事件，方便用户进行手动跳转： 

--- ----------------- -----------------
  -- ----------------- --------------
-----

--- ----------------- -----------------
  -- ----------------- --------------
-----

--- ----------------- -----------------
  -- ----------------- --------------
-----

同样的，我们给每一个 page-item 添加一个 id 来获取节点，然后绑定点击事件即可。

------------- -
  -- ---

  -- -----------
  ----- --------- - -------------------------------------------
  ------------------------ -- -
    ------------------------------ ------------------------ ------------------------------
  ---
-

-------------------- -
  -- -------
-

页码列表渲染

接下来我们需要实现渲染页码列表的逻辑。

首先，我们需要获取当前分页器的属性值，包括 page、total 和 pageSize。

--- ------ -
  ------ ----------------------------------- -- --
-

--- --------- -
  ------------------------- -----
-

--- ------- -
  ------ ------------------------------------ -- --
-

--- ---------- -
  -------------------------- -----
-

--- ---------- -
  ------ ---------------------------------------- -- ---
-

--- ------------- -
  ------------------------------ -----
-

接下来，我们可以根据属性值计算出总页数和页面列表。

--- ------------ -
  ------ -------------------- - ---------------
-

--- ------- -
  --- --------- - --
  --- ------- - ----------------

  -- ---------------- - -- -
    -- ---------- -- -- -
      ------- - --
    - ---- -- ---------- - --------------- - -- -
      --------- - --------------- - --
    - ---- -
      --------- - --------- - --
      ------- - --------- - --
    -
  -

  ----- ----- - ------------------------ - - - ------------------
    ------ -- --------- - ---

  ------ ------
-

其中，我们通过计算当前页码，然后判断页码列表的起始页码和结束页码。

最后，我们可以通过遍历计算得到的页面列表，来渲染分页器的页码列表。

-------- -
  ----- --------- - -------------------------------------------
  ------------------------ -- -
    ----------------------------------
  ---

  ----- -- - --------------------------------

  -- ----------- - -------------- -
    --- ---- - - -- - -- ----------- ---- -
      ----- -- - -------------------------
      ------------------- --------------
    -
  - ---- -
    ----- ----- - -----------
    -------------------- -- -
      ----- -- - ----------------------------
      ------------------- --------------
    ---
  -
-

--------------------- -
  ----- -- - -----------------------------
  ------------------------------
  --------------------- --------------------

  ----- - - ----------------------------
  -----------------------------
  ---------------------- -----------
  ----------- - ----

  ------------------

  -- ---- --- ---------- -
    ---------------------------
  -

  ------ ---
-

以上代码中，我们通过 generatePageItem 方法来生成每一个页码元素，然后使用遍历，将每个页码元素添加到分页器中。

当前页码输入框和跳转功能

最后，我们需要添加一个输入框和跳转按钮，方便用户手动输入页码进行跳转。

---- ------------------ --------------- --------------- --------------- -------
  ------ ----------- ---------------------
  ---- ---------------------------
    ------- ---------- ---------------------- ------------- -------------------------
  ------
------

以上代码中，我们使用了 Bootstrap 4 的样式来渲染输入框和按钮，并且给输入框和按钮都添加了一个 id 值来方便获取节点。

接下来，我们绑定跳转按钮的点击事件：

------------- -
  -- ---

  --------------------------------------
    -------------------------- --------------------------
-

---------- -
  ----- ---------- - ----------------------------------------------- ---------------
  -- ------------ -- ---------- - - -- ---------- - ---------------- -
    -------
  -
  --------- - -----------
  --------------
-

以上代码中，我们获取到输入框中的值，如果输入值不符合要求则不进行跳转。否则，我们通过设置 page 属性值，然后重新渲染分页器来实现跳转功能。

同时，我们还需要根据 showQuickJumper 属性值，来决定是否展示输入框和按钮：

--- ----------------- -
  ------ ---------------------------------------
-

--- -------------------- -
  -- ----- -
    -------------------------------------- ----
  - ---- -- ---------------------------------------- -
    ------------------------------------------
  -
-

------------------- -
  -- ---------------------- -
    ------------------------------------------------------ - --------
  -
-

------------------------------ --------- --------- -
  -- ----- --- -------------------- -
    ------------------------------------------------------ - -------- - ------- - -------
  -
-

总结

通过使用 Custom Elements 和 Bootstrap，我们可以快速实现一个高度自定义的分页器组件。在组件的实现过程中，我们学习了如何创建一个 Custom Element，

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b4e905add4f0e0ffdc16b8

阅读全文

猜你喜欢

  • Tailwind 中如何控制元素的比例

    Tailwind.css 是适用于现代 WEB 开发应用的一款以功能和实用性为导向的 CSS 框架，它提供了一系列的样式和工具类名，使得我们可以快速的构建美观的用户界面，其中一个重要的功能就是控制元素...

    9 个月前
  • Flexbox 实现文本和图片排版的终极解决方案

    在前端开发中，页面排版是一个很重要的问题。而使用 Flexbox 布局可以让排版更加简单和灵活，尤其在同时存在文本和图片的情况下，Flexbox 更是能够提供一种终极的解决方案。

    9 个月前
  • 如何在 Hapi 中使用 NodeMailer 发送邮件？

    随着 Web 应用的发展，邮件是交流和传递信息的一种常见方式。在 Web 开发中，发送邮件是一个不可或缺的功能。Node.js 是一种优秀的服务器端技术，为了在 Hapi 框架中实现发送邮件，我们可以...

    9 个月前
  • Mongoose 的 save() 方法为什么会导致数据重复插入？如何解决？

    介绍 Mongoose 是一个优秀的基于 Node.js 平台的 MongoDB 数据库 ODM（对象-文档映射）工具，开发者可以使用它来快速地将 JavaScript 对象转换为 MongoDB 数...

    9 个月前
  • ECMAScript 2018 中的模板字符串更新及使用技巧

    在 ECMAScript 2018 中，模板字符串被添加了一些新特性，使得它更加强大和灵活。模板字符串在前端开发中被广泛使用，它可以帮助我们更加轻松地创建多行文本，以及进行字符串拼接等操作。

    9 个月前
  • Sass 保持 BEM 风格的实践方法

    什么是 BEM BEM 是一种类名命名规范，全称为 Block Element Modifier。它是一种用于前端开发的规范化 CSS 类名的标准化方法，可以让你的代码更具可读性、可维护性和可重用性。

    9 个月前
  • 解决 SPA 应用中页面卸载后数据未清理的问题

    单页应用（SPA）是现代 Web 开发中非常流行的一种技术架构，它通过在一个页面中动态加载内容来提高用户体验和性能。然而，SPA 应用在页面卸载后需要主动清理数据，否则数据会留在内存中，造成内存泄漏，...

    9 个月前
  • MongoDb 数据导入时如何避免出现’TypeError: object of type 'int' has no len() 错误’

    MongoDB 是一种流行的 NoSQL 数据库。因为它的灵活性和可扩展性，越来越多的开发人员开始使用它来存储和管理数据。但是，MongoDB 数据导入时常常会出现 TypeError: object...

    9 个月前
  • Enzyme 和 Jest 在 React Native 应用中的常见问题及解决方式

    Enzyme 和 Jest 在 React Native 应用中的常见问题及解决方式 React Native 在移动应用中越来越受欢迎，因此 React Native 的单元测试也变得越来越重要。

    9 个月前
  • 在 Kubernetes 中使用 Prometheus 进行性能调整

    Kubernetes 是一种流行的容器编排平台，可以轻松地创建、部署和管理容器应用。但是，随着应用程序的增长和用户数量的增加，Kubernetes 的性能可能会受到影响。

    9 个月前
  • ES2021 中的 String 原型的 replace 方法详解 —— 重点感性理解

    ES2021 中的 String 原型的 replace 方法详解 在 JavaScript 中，字符串是不可变的。也就是说，一旦创建了字符串，就无法直接修改它的内容。

    9 个月前
  • Serverless 技术架构在教育行业的应用案例分享

    背景介绍 随着互联网在教育行业中的应用越来越广泛，传统的基于物理服务器的架构已经无法满足应用的快速迭代和高效稳定运行的需求，而 Serverless 技术则成为了解决方案之一。

    9 个月前
  • 使用 Web Components 开发自适应的 UI 组件

    Web Components 是一项新的 Web 标准，它允许你创建可重用的自定义元素和组件，并且可以在任何地方使用它们，而不需要涉及任何框架或库。这意味着我们可以使用 Web Components ...

    9 个月前
  • 面向初学者：Babel Core 和 Babel CLI 的使用方法

    前言 随着前端技术的快速发展，前端开发已经成为了一个庞大而复杂的领域。为了使我们的代码更具可移植性，我们需要使用 JavaScript 的各种新特性，例如箭头函数，类，模板字符串等等。

    9 个月前
  • Jest 测试如何使用 ES6 import/export 语法

    前言 Jest 是一个用于 JavaScript 代码测试的框架。随着前端技术的不断发展，越来越多的项目开始采用 ES6 的 import/export 语法来管理模块，而 Jest 也提供了对该语法...

    9 个月前
  • Docker 开发 Java Web 应用的完整流程详解

    前言 Docker 是一种开源的容器化技术，可以在不同的平台上运行任何应用。在前端开发中，Docker 可以很好地解决开发环境搭建和应用部署的问题。 本文将详细介绍 Docker 开发 Java We...

    9 个月前
  • Sequelize 操作 MySQL 数据库完整指南

    前言 Sequelize 是一个基于 Promise 的 Node.js ORM（对象关系映射）框架，它可以运行在多个数据库中，包括 MySQL、PostgreSQL、SQLite 和 Microso...

    9 个月前
  • Redis 作为 Web 高速缓存的最佳实践

    前言 Web 应用程序通常需要高速缓存来提升性能。而 Redis 是一个快速、开源的内存键值存储系统，具有高速读写、持久化、集群化等功能。本文将介绍 Redis 作为 Web 高速缓存的最佳实践。

    9 个月前
  • 在 Windows 平台上实现无障碍访问的技巧

    随着网络的发展，前端技术在不断地演化和蓬勃发展。为了满足不同用户群体的需求，无障碍访问也日益加强。在 Windows 平台上实现无障碍访问对于网站和应用程序的可访问性具有重要意义。

    9 个月前
  • 详解 Koa2 的 Context 对象及其应用场景

    Koa2 是一款轻量级的 Node.js Web 框架，它的特点是兼容 ES2017 异步语法，洋葱模型中间件机制、代码量小、易于学习和使用。其中，Context 对象是 Koa2 框架中最重要的一个...

    9 个月前

相关推荐

    暂无文章