分页 Pagination
issue

分页组件

何时使用

用于内容过多,分页显示内容

如何使用

import { Pagination } from 'tinper-bee';

or

import Pagination from 'bee-pagination';
import 'bee-pagination/build/Pagination.css';

能力特性

API

参数 说明 类型 默认值
items 总页数 number 1
activePage 哪一页是激活状态 number 1
onSelect 切换页的方法 func () => {}
maxButtons 显示最多页数按钮 number 0
prev 显示上一页按钮 bool false
next 显示下一页按钮 bool false
first 显示第一页按钮 bool false
last 显示最后一页按钮 bool last
ellipsis 显示省略按钮 bool false
boundaryLinks 显示边界按钮 bool false
gap 按钮之间有间隔 bool true
noBorder 不显示按钮边框 bool false
size 分页按钮大小(lg md sm) string 'sm'
showJump 是否显示跳页选择 bool false(为了兼容老版本)
onDataNumSelect 选择每页多少条的回调函数 func () => {}
dataNumSelect 每页多少条的下拉选择Option内容 array ['5','10','15','20']
dataNum 每页显示条数在 dataNumSelect 数组中的下标 index。例如每页显示 15 条,那么 dataNum 的值应为 '15' 在 ['5','10','15','20'] 中的下标:2 num 1
total 一共多少条 num 1
disabled pagination不可用,不可点击 bool false
confirmBtn 渲染确认按钮dom的方法 func () => {}
sizeWithCookie 分页的大小存储在cookie中,需保证其唯一性 string ''

注意事项

bee-pagination@3.0.0 版本优化了分页交互,gap 默认值改为 true,size 默认值改为 'sm'

更新日志

  • v3.0.2 2020-08-13 ( release地址 )

    Features

  • v3.0.1 2020-08-11 ( release地址 )

    
                        
  • v3.0.0 2020-08-06 ( release地址 )

    
                        
  • v2.0.18 2020-08-04 ( release地址 )

    Bug Fixes

    • 改变total参数,分页按钮不变 (87ef965)
  • v2.0.17 2020-04-24 ( release地址 )

    Bug Fixes

    Features

  • v2.0.14 2019-11-21 ( release地址 )

    • bee-pagination @2.0.14
      • [ Feature ] 分页下拉选择加类名标识。
  • v2.0.11 2019-10-11 ( release地址 )

    • bee-pagination @2.0.11
      • 解决dataNum属性更新失败的问题。
  • v2.0.10 2019-09-17 ( release地址 )

    • bee-pagination @2.0.10
      • [Feature]分页条中的特殊按钮添加类名标识。
  • v2.0.9 2019-08-28 ( release地址 )

    • bee-pagination
      • [ Feature ]新增sizeWithCookie属性.将分页数据存储在cookie中.
        • 默认为'',不启用.启用时需传入唯一的key值
        • cookie的周期为7天(60 * 60 * 24 * 7)
  • v2.0.8 2019-05-24 ( release地址 )

    • bee-pagination @2.0.8
      • [Fixbug]解决动态传入items为0时,分页页码未更新问题
  • v2.0.7 2019-04-23 ( release地址 )

    • bee-pagination @2.0.7
      • [FixBug]解决单独引用组件时,缺少Select样式的问题
  • v2.0.6 2019-04-09 ( release地址 )

    • [Feature]bee-pagination @2.0.6,解决依赖组件的CSS打包问题
  • v2.0.5 2019-03-26 ( release地址 )

    • [Feature]bee-pagination @2.0.5,组件改为默认带边框,支持通过noBorder属性去掉边框
  • v2.0.4 2019-03-22 ( release地址 )

    • [Fixbug]bee-pagination @2.0.4,解决dataNum值为0时,数据没有更新的Bug
  • v2.0.3 2019-03-07 ( release地址 )

    • [Feature]bee-pagination @2.0.3
      • 分页的边框色统一改为#a5adba
      • 分页按钮的圆角统一为3px
      • 页码按钮的hover色统一改为#ebecf0
  • v2.0.2 2019-03-06 ( release地址 )

    • bee-pagination @2.0.2
      • [Fixbug]解决输入框的边框色与下拉框不一致的问题