在 Vue.js 前端开发中，经常需要用到分页组件。这时候，我们可以选择使用 npm 包 vue-pagination-wing。
什么是 vue-pagination-wing？
vue-pagination-wing 是一个基于 Vue.js 开发的分页组件，易于配置和使用，支持主题定制，具有良好的兼容性，并且支持 SSR（服务器端渲染）。
安装
安装 vue-pagination-wing，只需要在命令行运行如下命令即可：
npm install vue-pagination-wing
使用步骤
1. 引入组件
在 Vue 组件中，先引入 vue-pagination-wing 组件：
import Pagination from "vue-pagination-wing";
2. 在页面中使用组件
在页面中使用 vue-pagination-wing 分页组件，需要在 template 中添加如下代码：
<pagination :current-page="currentPage" :page-size="pageSize" :total="total" @change="handleChange"></pagination>
其中，currentPage 表示当前页码，pageSize 表示每页显示的数据数量，total 表示总数据条数。@change 表示分页组件页码改变时的事件处理函数。
3. 完整示例代码
-- -------------------- ---- -------
----------
-----
-------
-------
----
-----------
-----------
-----
--------
-------
--- ----------- -- ----- ---------------
------ ------- -------
------ --------- -------
-----
--------
--------
-----------
---------------------------
---------------------
--------------
----------------------
--------------
------
-----------
--------
------ ---------- ---- ----------------------
------ ------- -
----- -----------------
----------- -
-----------
--
------ -
------ -
----- ---
------------ --
--------- ---
------ ----
--
--
--------- -
-- -------
-----------------
--
-------- -
-- ------
----------- -
----- ----- - ----------------- - -- - --------------
----- --- - ----- - --------------
----- -------- - ------------ ------- ---------- ------------- ------ -- --
--- ----- - --
----- ------------ - ----
----
--------- - --------------------- -----
--
-- ----------------
------------------------- -
---------------- - ------------
-----------------
--
--
--
---------自定义主题
vue-pagination-wing 支持主题定制，用户可以根据自己的需要进行自定义。在使用 vue-pagination-wing 前，需要在 CSS 中定义主题样式。主题样式的名称和 Bootstrap 的样式类名类似，具体如下表：
主题样式类名
| 名称 | 描述 |
|---|---|
| .pagination-wing | 分页组件的容器 |
| .pagination-wing__button | 分页按钮 |
| .pagination-wing__ellipsis | 省略号 |
| .pagination-wing__active | 当前页的按钮样式 |
| .pagination-wing__disabled | 不可点击按钮的样式 |
在 CSS 中定义样式，例如：
-- -------------------- ---- ------- ---------------- - -------- ----- ---------------- ------- ------------ ------- - ------------------------ - ------------- ---- -------- - ---- ------- --- ----- ----- -------------- ---- ----------------- ----- ---------- ----- ------ ----- ------- -------- ----------- ---------------- ---- ----- - ------------------------------ - ----------------- ----- - ------------------------ - ----------------- -------- ------ ----- - -------------------------- - ------------- ---- ---------- ----- ------ ----- -
总结
通过以上步骤，我们可以轻松使用 npm 包 vue-pagination-wing 来实现分页功能。在使用时，我们可以自定义主题样式，让分页组件与整个页面风格统一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005753b81e8991b448ea483