介绍
vue-pagination-2-bulma 是一个基于 Bulma 的 Vue 分页组件。
Bulma 是一个基于 Flexbox 的现代 CSS 框架，具备易用、移动优先、响应式布局及免费的优点。
此 npm 包提供了一种简单、易用并具有强大的自定义功能的分页组件方案，可以应用于各种 Vue 项目中。
在本篇文章中，我们会详细介绍如何使用 vue-pagination-2-bulma，并提供示例代码和指导意义。
安装
在项目目录中，输入以下命令来安装 vue-pagination-2-bulma：
npm install vue-pagination-2-bulma
或者通过 yarn 安装：
yarn add vue-pagination-2-bulma
引入
在 Vue 组件中引入 vue-pagination-2-bulma：
import Vue from 'vue'
import VuePagination from 'vue-pagination-2-bulma'
Vue.component('vue-pagination', VuePagination)使用
在组件中使用 vue-pagination-2-bulma：
-- -------------------- ---- -------
----------
-----
---- ---------------------------- - ---
---------------
------------------------
----------------------
------------------
------
------
-----------
--------
------ --- ---- -----
------ ------------- ---- ------------------------
------------------------------- --------------
------ ------- -
------ -
------ -
----------- -
------------- --
--------- ---
------------ --
--
-
--
-------- -
---------------- -
----------------- -- ----
--
--
-
---------API
vue-pagination-2-bulma 使用以下 props：
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| pagination | Object | — | true | 分页信息 |
| pagination.per_page | Number | 10 | false | 每页显示数量 |
| pagination.current_page | Number | 1 | false | 当前页数 |
| pagination.total_pages | Number | 0 | true | 总页数 |
| hideZeroPage | Boolen | false | false | 隐藏首页和末页 |
| customClass | String | — | false | 定制分页组件的样式 |
| pageCallback | mixed | — | false | 当页数更改时回调函数，接收页数作为参数 |
| pageContour | Number | 3 | false | 显示当前页左右分页标签的数量 |
自定义样式
vue-pagination-2-bulma 支持自定义分页组件样式。通过设置 customClass prop ：
<vue-pagination ... customClass="my-pagination-class" ></vue-pagination>
这里，我们只需要设置一个新的 class 名称：“my-pagination-class”，并将其应用到每个分页元素中：
-- -------------------- ---- ------- -------------------- -- -------------------- ---- - -------- ------------- -------- ------- -------- -------------- ---- ------ -------- ------- --- ----- -------- ------------- ---- -------------- ---- ------- -------- - -------------------- ------------- -------------------- ------- - ----------------- -------- ------ ----- ------------- -------- -
示例
下面是一个使用 vue-pagination-2-bulma 的示例，展示了如何在 Vue 中创建、查看和编辑数据表格。
-- -------------------- ---- -------
----------
-----
---- ---- ---
-------
-------
----
----------
-----------
-----------
-----------
-----
--------
-------
--- ------------- ------ -- ------------ -------------
------ ----- - - -------
------ --------- -------
------ -------- -------
------ -------- -------
-----
--------
--------
---- ---- ---
---------------
------------------------
----------------------
--------------------------
----------------------------------
------------------
------
-----------
--------
------ --- ---- -----
------ ------------- ---- ------------------------
------------------------------- --------------
------ ------- -
------ -
------ -
----- -
- ----- ----- ---- ------ ---- -- --
- ----- ----- ---- ------ ---- -- --
- ----- ----- ---- ------ ---- -- --
- ----- ----- ---- ----- ---- -- --
- ----- ----- ---- ----- ---- -- --
- ----- ----- ---- ------- ---- -- --
- ----- ----- ---- -------- ---- -- --
- ----- ----- ---- ----- ---- -- --
- ----- ----- ---- ------ ---- -- --
- ----- ----- ---- ------ ---- -- --
--
----------- -
------------- --
--------- --
------------ --
--
-
--
--------- -
------------ ---------- -
----- ----- - ----------------------------- - -- - ------------------------
----- --- - ---------------------------- - ------------------------
------ ---------------------- ----
--
--
-------- -
---------------- -
---------------------------- - ----
--
--
-
---------结论
vue-pagination-2-bulma 提供了一种轻松、自定义、易用并具有强大的分页组件方案，可以应用于各种 Vue 项目中。 通过在我们的 Vue 组件中引入此 npm 包并使用它，我们可以方便地获得分页组件并轻松查看、管理和编辑我们的数据表格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd881e8991b448dd635