分页 Pagination
分页组件
何时使用
用于内容过多,分页显示内容
如何使用
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.1 2020-08-11 ( release地址 )
-
v3.0.0 2020-08-06 ( release地址 )
-
v2.0.14 2019-11-21 ( release地址 )
- bee-pagination @2.0.14
- [ Feature ] 分页下拉选择加类名标识。
- bee-pagination @2.0.14
-
v2.0.11 2019-10-11 ( release地址 )
- bee-pagination @2.0.11
- 解决dataNum属性更新失败的问题。
- bee-pagination @2.0.11
-
v2.0.10 2019-09-17 ( release地址 )
- bee-pagination @2.0.10
- [Feature]分页条中的特殊按钮添加类名标识。
- bee-pagination @2.0.10
-
v2.0.9 2019-08-28 ( release地址 )
- bee-pagination
- [ Feature ]新增sizeWithCookie属性.将分页数据存储在cookie中.
- 默认为'',不启用.启用时需传入唯一的key值
- cookie的周期为7天(60 * 60 * 24 * 7)
- [ Feature ]新增sizeWithCookie属性.将分页数据存储在cookie中.
- bee-pagination
-
v2.0.8 2019-05-24 ( release地址 )
- bee-pagination @2.0.8
- [Fixbug]解决动态传入items为0时,分页页码未更新问题
- bee-pagination @2.0.8
-
v2.0.7 2019-04-23 ( release地址 )
- bee-pagination @2.0.7
- [FixBug]解决单独引用组件时,缺少Select样式的问题
- bee-pagination @2.0.7
-
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
- [Feature]bee-pagination @2.0.3
-
v2.0.2 2019-03-06 ( release地址 )
- bee-pagination @2.0.2
- [Fixbug]解决输入框的边框色与下拉框不一致的问题
- bee-pagination @2.0.2