概述
开发前端网站经常需要分页功能，但是写分页代码十分繁琐和麻烦。npm 包 ospage 可以简化分页功能的实现。本文介绍 ospage 的使用教程。
安装
在终端输入以下命令进行安装：
npm install ospage
使用
ospage 有两个方法 getStyle 和 getPage 。
getStyle
getStyle 方法返回一个 style 字符串，用于渲染分页样式。例如：
import { getStyle } from 'ospage'
console.log(getStyle())就会输出以下字符串：
-- -------------------- ---- ------- ------------------ ------------ - -------- ------------- --------------- ------- - ----------------- - ------- --- ----- ----- -------- ---- - --------------------- - ------ ----- - ------------------- - ------ ---- ------------ ----- -
可以将这个字符串插入到网页样式中，或者将其写入到相应的文件中。
getPage
getPage 方法返回一个分页器对象。例如：
import { getPage } from 'ospage'
const pager = getPage({ total: 100 })
console.log(pager)就会输出以下对象：
-- -------------------- ---- -------
-
-------- ----
---------- --
----------- ---
------------ ---
-------- --
-------- -
- ------- ---- --------- ----- ----------- ------ -------- -- ------------ ----- --
- ------- ---- --------- ------ ----------- ------ -------- -- ------------ ---- --
- ----------- ----- ------- ---- --------- ------ ----------- ----- -------- --- ------------ ----- --
- ------- ----- --------- ------ ----------- ------ -------- -- ------------ ---- -
-
-分页器对象的属性说明如下：
total：总共的数据项数量pageNum：当前页码pageSize：每页显示数量pageCount：总共的页数index：当前页码在分页器数组中的索引items：分页器数组，每个元素表示一个页码或省略号（...）。分页器数组最多包含 7 个元素。
分页器数组中每个元素的属性说明如下：
text：页码或省略号（...）的文本内容active：当前页码是否为该元素表示的页码disabled：该元素是否为省略号（...）index：该元素表示的页码的页码编号clickable：该元素是否可点击
示例
下面的代码使用 ospage 实现一个分页器：
-- -------------------- ---- -------
------ - --------- ------- - ---- --------
----- ----- - ----------
----- -------------- - -----------------------------
------------------------ - ------------------
-----------------------------------------
----- ----- - --------- ------ --- --
------------------------ -- -
----- -- - ------------------------------
------------ - -------------- ----------- - - ------------------- - -- --- ------------- - - --------------------- - -- --
------------ - ---------
---------------- - -----
-- ---------------- -
---------------------------- -- -- -
----------------------- - --
------------------
--
-
------------------------------
--页面中将出现一个分页器，样式如下：
1 2 … 10
可以点击页码实现跳转功能。
总结
ospage 包可以帮助前端开发者简化分页器的实现。本文介绍了 ospage 的两个方法：getStyle 和 getPage，并给出了示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fb81e8991b448e4223