npm 包 @beisen-platform/paging 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@beisen-platform/paging 是一个基于 Vue 框架的分页组件，具有简单易用、自定义性强、样式美观等特点。在前端开发中，分页组件经常被使用，因此了解如何使用 @beisen-platform/paging 组件能够大大提高开发效率。

安装

@beisen-platform/paging 可以通过 npm 安装，安装方法如下：

npm install @beisen-platform/paging --save

使用

组件的引用方式有两种，可以按需引入或者全局引入。

按需引入

按需引入需要在需要使用分页组件的 Vue 组件中引入 @beisen-platform/paging 组件，方式如下：

import Paging from '@beisen-platform/paging'

export default {
  components: {
    Paging
  }
}

然后在模板中使用 Paging 即可。

<template>
  <div>
    <paging :total="100" :page-size="10" @page-change="getPageData"></paging>
  </div>
</template>

全局引入

全局引入需要在 Vue 的入口文件中引入 @beisen-platform/paging 组件，并注册组件，方式如下：

import Vue from 'vue'
import Paging from '@beisen-platform/paging'

Vue.component('paging', Paging)

然后在 Vue 组件中可以直接使用 Paging：

<template>
  <div>
    <paging :total="100" :page-size="10" @page-change="getPageData"></paging>
  </div>
</template>

参数说明

@beisen-platform/paging 提供了以下参数：

参数名	类型	必填	说明
total	Number	是	数据总数
page-size	Number	是	每页数据条数
current-page	Number	否	当前页码
pager-count	Number	否	页码按钮数量
prev-text	String	否	上一页按钮文本
next-text	String	否	下一页按钮文本
disabled	Boolean	否	是否禁用分页
hide-on-single-page	Boolean	否	只有一页时是否隐藏分页条
page-class	String	否	自定义样式类名
page-size-opts	Array	否	每页显示条数的下拉框选项

事件说明

@beisen-platform/paging 提供了以下事件：

事件名	参数	说明
page-change	page	点击页码切换页码时触发，参数为切换后的页码

示例代码

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

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

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

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

总结

通过本教程，大家可以学会如何安装、引入和使用 @beisen-platform/paging 分页组件，同时也了解了组件的参数和事件，希望本文能对大家在前端开发中的工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/beisen-platform-the-paging