前言
在前端开发中，分页功能是经常使用的功能，但是每次都要手动写样式和分页逻辑，非常繁琐。这时候，我们可以使用成熟的分页组件库，省去制作和维护分页组件的时间。本文将会介绍一个可用于 vue2 项目的分页组件库 @wuxiangwa/vue2-bulma-pagination，并详细讲解如何使用。
简介
@wuxiangwa/vue2-bulma-pagination 是一个基于 bulma CSS 框架开发的 vue2 分页组件库，支持多种分页模式和自定义样式，使用简单，易于扩展。库地址： https://www.npmjs.com/package/@wuxiangwa/vue2-bulma-pagination
安装
该库支持 npm 安装，通过 npm 安装后，就可以在 vue2 项目中使用该组件。
npm
npm install --save @wuxiangwa/vue2-bulma-pagination
使用方法
引入
-- -------------------- ---- -------
----------
-----
-----------
-----------
-----------------
-----------
------------
--
------
-----------
--------
------ ---------- ---- -----------------------------------
------ ------- -
----- ------
----------- -
----------
--
------ -
------ -
----- -
--
-
--
---------Props
total组件使用的总数据条数，必填。limit每页显示数据数，默认值 10。page组件使用的当前页数，支持 sync 同步修改。maxView组件最多显示的分页按钮数。
事件
page-change当前所在分页更改时触发。page-click点击某一页时触发。
示例代码：
-- -------------------- ---- -------
----------
-----
-----------
-----------
-----------------
-----------
------------
---------------------------
-------------------------
--
------
-----------
--------
------ ---------- ---- -----------------------------------
------ ------- -
----- ------
----------- -
----------
--
------ -
------ -
----- -
--
--
-------- -
--------------------- -
---------------------- ---------
--
----------------- -
------------------- ------
-
-
--
---------总结
本文介绍了使用 @wuxiangwa/vue2-bulma-pagination 组件库实现简单的分页功能的方法。该库有非常详细的文档和示例，可以方便我们学习和使用，同时也给我们提供了一个思路，以后遇到类似的问题时也可以尝试使用库来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf181e8991b448e6a25