简介
vue-bs-pagination 是一个基于 Boostrap 的 Vue 分页组件。提供了简单易用的分页功能，并支持自定义样式和事件绑定。
安装
npm install vue-bs-pagination --save
使用
全局引入
在入口文件 main.js 中引入和注册组件：
-- -------------------- ---- ------- -- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ --------------- ---- ------------------- ------------------------ --- ----- --- ------- ------- - -- ------ --
在组件中使用：
-- -------------------- ---- -------
-- ---------------
----------
-----
------------------
--------------
-------------------
---------------------------
------------------------------
---------------------------------
--
------
-----------
--------
------ ------- -
------ -
------ -
------ ----
-------- ---
------------ --
------------- -----
-
--
-------- -
----------------------- -
----------------- ------- -- ----------
-
-
-
---------局部引入
在某个组件中引入：
-- -------------------- ---- -------
-- ---------------
----------
-----
------------------
--------------
-------------------
---------------------------
------------------------------
---------------------------------
--
------
-----------
--------
------ --------------- ---- -------------------
------ ------- -
----------- -
-------------------- ---------------
--
------ -
------ -
------ ----
-------- ---
------------ --
------------- -----
-
--
-------- -
----------------------- -
----------------- ------- -- ----------
-
-
-
---------API
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| total | Number | Required | 总数据量 |
| per-page | Number | Required | 每页显示数量 |
| current-page | Number | 1 | 当前页数 |
| hide-prev-next | Boolean | false | 是否隐藏上一页、下一页按钮 |
| prev-text | String | '上一页' | 上一页按钮文本 |
| next-text | String | '下一页' | 下一页按钮文本 |
| first-text | String | '首页' | 首页按钮文本 |
| last-text | String | '尾页' | 尾页按钮文本 |
| active-class | String | 'active' | 当前页按钮样式类名 |
| page-link-class | String | '' | 分页按钮的样式类名 |
| prev-link-class | String | '' | 上一页按钮的样式类名 |
| next-link-class | String | '' | 下一页按钮的样式类名 |
| first-link-class | String | '' | 首页按钮的样式类名 |
| last-link-class | String | '' | 尾页按钮的样式类名 |
| page-range | Number | 3 | 当前页前后可见页数，不包括首页和尾页，例如 page-range=3，当前页码为 5，可见页码为：2, 3, 4, 5, 6, 7, 8 |
| ellipsis-text | String | '...' | 省略号文本 |
Events
| Event Name | Arguments | Description |
|---|---|---|
| page-changed | page: Number | 分页器按钮点击时触发，传递当前页数 |
插槽 (Slot)
| Name | Description |
|---|---|
| prev-text | 自定义上一页按钮文本 |
| next-text | 自定义下一页按钮文本 |
| first-text | 自定义首页按钮文本 |
| last-text | 自定义尾页按钮文本 |
| page-link | 自定义分页按钮的内容，插槽的作用域变量为页码 |
| prev-link | 自定义上一页按钮的内容 |
| next-link | 自定义下一页按钮的内容 |
| first-link | 自定义首页按钮的内容 |
| last-link | 自定义尾页按钮的内容 |
| prev-disabled | 自定义上一页按钮禁用（不可点击）时的内容 |
| next-disabled | 自定义下一页按钮禁用（不可点击）时的内容 |
| first-disabled | 自定义首页按钮禁用（不可点击）时的内容 |
| last-disabled | 自定义尾页按钮禁用（不可点击）时的内容 |
| ellipsis | 自定义省略号的内容 |
| before | 自定义整个分页组件的前导内容，即从这里插入一些文本或其他组件 |
| after | 自定义整个分页组件的后继内容，即在分页组件后面插入一些文本或其他组件 |
示例
以下示例演示如何自定义分页器样式，以及如何使用插槽和事件处理函数来实现更复杂的逻辑。
-- -------------------- ---- -------
----------
-----
------------------
--------------
-------------------
---------------------------
------------------------------
---------------------
---------------------
-----------------------
---------------------
---------------------------
--------------------------------
--------------------------------
--------------------------------
----------------------------------
--------------------------------
-----------------------
-----------------------------
---------------------------------
-
---- ---------------- --------------------
-------- ----
------
---- ---------------- --------------------
---- --------
------
---- ---------------- ------------- ---- ---
---- ---------------------- ---- --------
------
---- ---------------- --------------------
--------
------
---- ---------------- --------------------
--------
------
---- ----------------- --------------------
-----
------
---- ---------------- --------------------
----
------
---- -------------------- ------------------ ----------
--------
------
---- -------------------- ------------------ ----------
--------
------
---- --------------------- ------------------ ----------
-----
------
---- -------------------- ------------------ ----------
----
------
--------------------
------
-----------
--------
------ --------------- ---- -------------------
------ ------- -
----------- -
-------------------- ---------------
--
------ -
------ -
------ ----
-------- ---
------------ --
------------- ------
--------- -----------
--------- -----------
---------- -----
--------- -----
------------ ---
-------------- ------------
-------------- ---
-------------- ---
--------------- ---
-------------- ---
---------- --
------------- -----
-
--
-------- -
----------------------- -
----------------- ------- -- ----------
-
-
-
---------
-------
------------ -
-------- -------------
------- - ----
-------- --- -----
----------------- --------
------ -----
------- --------
-
----------------- -
----------------- --------
------ -----
-
--------- -
-------- ----
------- --------
-
--------上述示例中，我们重写了分页按钮的样式，使用了一些自定义的文本和样式类名。我们使用了 slot 插槽，分别自定义了分页组件的各个部分的内容，例如上一页、下一页、页码等等。我们还使用了事件处理函数来监听分页器的 page-changed 事件，并在函数中输出了当前页数。
总结
通过本文的介绍和示例，我们可以轻松地使用 npm 包 vue-bs-pagination 来实现分页功能，以及自定义样式和事件绑定。在实际项目中，我们可以根据实际需求并结合官方文档来进行复杂的定制化开发。同时，我们也深刻理解了组件化开发的思想，并学习了如何正确地使用 Vue 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056a9681e8991b448e5192