npm 包 vue-bs-pagination 使用教程

简介

vue-bs-pagination 是一个基于 Boostrap 的 Vue 分页组件。提供了简单易用的分页功能，并支持自定义样式和事件绑定。

安装

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

使用

全局引入

在入口文件 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

阅读全文

猜你喜欢

  • NPM 包 generator-pauls-easy-react-webpack 使用教程

    简介 NPM 包 generator-pauls-easy-react-webpack 是一个通用的 React 开发工具，使用它可以快速构建出适用于你的项目的基础 React 开发环境，为你的项目提...

    3 年前
  • npm 包 platzidioma 使用教程

    什么是 platzidioma platzidioma 是一个用于多语言显示的 npm 包，支持多种语言的切换以及复数、性别等变量。 安装 你可以通过 npm 安装 platzidioma: --- ...

    3 年前
  • npm 包 styled-react-components 使用教程

    前言 在前端开发中，样式通常是一个重要的部分。为了方便、高效地处理样式，许多工具和框架被开发出来。其中，styled-components 在 React 开发中被广泛应用，它可以让我们通过 Java...

    3 年前
  • npm 包 create-mobx-app 使用教程

    在前端开发中，我们经常会使用 React 和 MobX 来帮助我们构建强大的应用程序。但是，为了搭建一个新的 React 和 MobX 应用，需要安装和配置很多工具，这通常需要消耗大量的时间和精力。

    3 年前
  • npm 包 iisp-bpm 使用教程

    前言 iisp-bpm 是一个基于 Node.js 平台的前端开发工具，它可以帮助我们快速搭建一个企业级前端项目脚手架，提高我们的工作效率。本篇文章将详细介绍 iisp-bpm 的使用方法，希望能够帮...

    3 年前
  • npm 包 hey-watcher 使用教程

    简介 hey-watcher 是一个非常实用的 npm 包，它可以帮助开发者监控指定文件的变化，并在变化发生时执行指定的回调函数。采用 hey-watcher，我们不必手动的反复检测文件的变化，从而提...

    3 年前
  • npm 包 jubi-express-controller 使用教程

    介绍 jubi-express-controller 是一个基于 express 框架的控制器库，它可以快速为你的 express 应用提供控制器功能。使用这个库，你可以实现快速构建 MVC 架构的 ...

    3 年前
  • npm 包 react-native-svg-pan-zoom 使用教程

    介绍 react-native-svg-pan-zoom 是一个基于 React Native 平台下的 SVG 缩放和拖动功能的 npm 包。其主要作用是将 SVG 数据以可操作的方式展示给用户，使...

    3 年前
  • npm 包 @brickify/m-bundler 使用教程

    引言 Node.js 的包管理器 npm 是前端开发中不可或缺的工具之一。在众多的 npm 包中，@brickify/m-bundler 是一款非常实用的前端构建工具，它可以将 JavaScript、...

    3 年前
  • Webex PMR Observer NPM 包使用教程

    本篇文章介绍了 Webex PMR Observer NPM 包的使用方法。Webex PMR Observer 是一个前端 JavaScript 库，可用于监测 Webex IP 电话的通话参数和相...

    3 年前
  • npm 包 apoc-sidebar 使用教程

    前言 在前端开发中，侧边栏是一个很常用的组件。为了方便开发，我们可以使用已有的组件库或者自己封装一个组件库。其中，apoc-sidebar 就是一个很实用的 npm 包，可以快速地实现侧边栏的布局和样...

    3 年前
  • npm 包 @brickify/m-jt 使用教程

    介绍 @brickify/m-jt 是一款常用于前端开发的 npm 包。它提供了众多的工具函数，可以帮助我们快速、轻松地进行开发。 安装 首先，需要安装 @brickify/m-jt 包。

    3 年前
  • npm 包 @brickify/m-merge 使用教程

    在前端开发中，我们经常需要处理不同数据结构之间的合并问题。而在实际工作中，为了提高效率和降低开发成本，我们通常会借助现有的优秀 npm 包来实现这一目的。@brickify/m-merge 就是这样一...

    3 年前
  • npm 包 redux-shades 使用教程

    在前端开发中，使用 React 开发用户界面时，状态管理是一个必备的工具。而 Redux 是一个流行的状态管理工具，它提供了一种一致性的方式来处理状态，并且可以在应用程序的各个部分之间共享数据。

    3 年前
  • npm包Google-voice-api使用教程

    Google-voice-api 是一款基于 Node.js 环境的工具，可以轻松地实现通过 Google Voice 进行语音短信和电话的功能。它可以快速地将文字转换为语音，并使用 Google 声...

    3 年前
  • npm 包 attach-labels 使用教程

    在前端开发中，我们常常需要给 HTML 元素添加标签，而手动动态添加标签是很麻烦的。为了解决这个问题，我们可以使用 npm 包 attach-labels。 attach-labels 是一个免费且开...

    3 年前
  • npm 包 Chat-Adapter-RocketChat 使用教程

    介绍 Chat-Adapter-RocketChat 是一个基于 Node.js 的 npm 包，提供了与 Rocket.Chat 交互的 API 接口。Rocket.Chat 是一款开源的团队聊天工...

    3 年前
  • npm 包 esky 使用教程

    前言 在前端开发中，我们都知道使用多种库和工具都可以使开发变得更加高效。而 npm 包作为前端开发中最主要的库管理工具之一，每天都在不断地增加新的可供使用的包。 其中一个十分实用的包就是 esky，它...

    3 年前
  • npm 包 daburu-ts-npm 使用教程

    简介 daburu-ts-npm 是一个 npm 包，用于在 TypeScript 项目中实现依赖注入。依赖注入可以帮助我们更轻松地管理和维护我们的项目代码。本篇文章将介绍使用 daburu-ts-n...

    3 年前
  • npm 包 gulp-rev-append-custom 使用教程

    在前端开发中，压缩文件、缓存等是我们必须要考虑的问题。gulp-rev-append-custom 这个 npm 包就是为了解决这个问题而生的。它能够在文件中添加版本号，进而达到缓存的目的。

    3 年前

相关推荐

    暂无文章