更新记录
1.2.4(2020-09-01) 下载此版本
因为微信小程序的数字键盘没有回车键,所以新增失焦也能完成输入
1.2.3(2020-08-31) 下载此版本
修复current仅第一次有效的bug
1.2.2(2020-08-31) 下载此版本
优化总页数计算公式
查看更多平台兼容性
一、使用说明
-
解压下载的压缩包,将组件放在项目的components目录下
-
引用组件
<wyb-pagination @change="onPageChange"/>
import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue' export default { components: { wybPagination }, methods: { onPageChange(e) { let pageNum = e.current // 页码 let type = e.type // 类型 } } }
-
Demo体验地址:点我访问(请用手机访问,或用桌面浏览器启动手机调试模式)
-
如果觉得我的插件还不错,可以下载我的插件的示例集合Demo => 传送门,里面有我全部的插件以及全部插件的示例工程
二、参数说明
-
Props
参数名 类型 默认值 说明 可选值 total-items String, Number 20 数据总数 page-items String, Number 5 每页几条数据 current Number 1 组件初始化时显示第几页 prev-text String '上一页' 上一页按钮文字 next-text String '下一页' 下一页按钮文字 first-text String '首页' 首页按钮文字 last-text String '尾页' 尾页按钮文字 page-info-color HexColor, RgbColor '#494949' 页码信息的文字颜色(不包括当前页码) current-color HexColor, RgbColor '#007aff' 当前页码的颜色 padding String, Number 15 组件两侧的内间距 btn-style Object 组件按钮的样式,同css样式(驼峰形式:例如font-size要写成fontSize) show-icon Boolean false 是否使用图标按钮 true | false show-total-item Boolean false 是否显示数据总数 true | false show-first Boolean true 是否显示首页按钮 true | false show-last Boolean true 是否显示尾页按钮 true | false could-input Boolean true 是否开启输入页码功能,点击页码信息可以输入页码,点击键盘回车或让输入框失焦即可完成输入,页码没改变时会回到页码信息,什么都不会发生 true | false cursor-spacing Number 0 指定光标与键盘的距离(单位:px) -
Event
事件名 说明 返回值 @change 切换页的回调 event={type, current}