npm 包 vue-paginate 使用教程

简介

vue-paginate 是一个基于 Vue.js 的分页组件。它提供了简单易用的 API 和丰富的配置选项，可以快速地帮助我们在 Vue 项目中实现分页功能。

安装

使用 npm 可以方便地安装 vue-paginate：

npm install vue-paginate --save

基本用法

在 Vue 组件中引入 vue-paginate 后，可以通过以下方式使用：

-- -------------------- ---- -------
----------
  -----
    ----
      --- ----------- -- --------------- -------------- ---- -------
    -----
    ---------
      -------------
      -------------------
      ------------------
      ------------------
      ---------------------------------
    --
  ------
-----------

--------
------ -------- ---- --------------

------ ------- -
  ----------- -
    ---------
  --
  ------ -
    ------ -
      ------ ---
      -------- ---
      ------------ --
    -
  --
  --------- -
    ---------------- -
      ----- ----- - ----------------- - -- - ------------
      ----- --- - ----- - ------------
      ------ ----------------------- ----
    --
  --
  -------- -
    ----------------------- -
      ---------------- - ----
    --
  --
-
---------

在这个例子中，我们将 vue-paginate 组件放在了需要分页的数据列表下方，paginate 组件接收 4 个 props：

• list: 需要分页的数据列表
• per-page: 每页显示的数据条数
• prev-text: 上一页按钮的文本
• next-text: 下一页按钮的文本

同时，我们在组件中定义了两个计算属性：

• paginatedItems: 根据当前页码和每页显示条数计算出需要显示的数据列表
• totalPages: 计算出总页数

最后，在 page-changed 事件触发时更新当前页码即可。

高级用法

vue-paginate 还提供了各种配置选项，可以完全自定义分页组件的样式和行为。以下是一些常见的高级用法：

自定义分页按钮

-- -------------------- ---- -------
---------
  -------------
  -------------------
  ------------------
  ------------------
  ----------------
  -------------------------------
  -------------------------
  -------------------------
  -------------------------
  -------------------------
  ------------------------------
  ------------------------------
  ------------------------
  ----------------------------
  ---------------------------------
--

在这个例子中，我们使用了各种 props 来定制分页按钮的样式：

• page-count: 显示的按钮数量
• container-class: 分页容器的 class
• page-class: 每个按钮的容器 class
• link-class: 每个按钮的链接 class
• prev-class: 上一页按钮的容器 class
• next-class: 下一页按钮的容器 class
• prev-link-class: 上一页按钮的链接 class
• next-link-class: 下一页按钮的链接 class
• active-class: 当前页码按钮的 class
• disabled-class: 禁用按钮的 class

使用插槽自定义按钮内容

-- -------------------- ---- -------
---------
  -------------
  -------------------
  ---------------------------------
-
  --------- -------------- ----------- --------- ---
    -------
      ---------- --------------
      ----------------------
      ------------------
    -
      ---
    ---------
  -----------
  --------- -------------- ----------- --------- ---
    -------
      ---------- ---

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------