1.0.0 • Published 5 years ago
e6page v1.0.0
此组件为 E6Page 组件,基于vue封装的分页组件。 如有bug和其他需求,请联系作者进行扩展和修改。
1.安装
npm i e6page
2.用法
main.js 中进行导入和使用:
import E6Page from 'e6page'
Vue.use(E6Page);
对应页面模板中使用:
import E6Page from 'e6page'
<script>
export default {
components:{
E6Page
}
}
</script>
<e6-page
v-model="index"
:sizes="[100, 200, 300, 400]"
:page-size="10"
:showPage="7"
options="total, sizes, prev, pager, next, jumper"
@indexChange="indexChange"
@sizeChange="sizeChange"
:total="400">
</e6-page>
3.配置
参数 | 类型 | 是否必须 | 默认值 | 说明 |
---|---|---|---|---|
total | Number | 是 | 5 | 总数量 |
v-model | variable | 是 | 绑定的当前页码 | |
sizes | Array | 否 | 10,20,30,40,50 | 页显示条数选项数组 |
pageSize | Number | 否 | 10 | 默认每页显示条数 |
options | String | 否 | 'total, sizes, prev, pager, next, jumper' | 配置是否需要 |
showPage | Number | 否 | 5 | 显示的页码数量,只能为5~21的奇数 |
indexChange | Function | 否 | 页码变化回调 | |
sizeChange | Function | 否 | 每页显示数量变化回调 |
**options:
完整配置:'total, sizes, prev, pager, next, jumper'
total: 有则显示总数量,无则不显示;
sizes: 有则显示页数切换,无则不显示;
prev: 有则显示上一页操作,无则不显示;
pager: 有则显示页码,无则不显示;
next: 有则显示下一页,无则不显示;
jumper: 有则显示跳转,无则不显示;
4.回调函数
a.当前页发生变化回调
@indexChange="indexChange"
// 传入方法名,在选中时自动回调
indexChange(val){
console.log(val);// 2
}
a.每页显示数量发生变化回调
@sizeChange="sizeChange"
// 传入方法名,在选中时自动回调
sizeChange(val){
console.log(val);// 20
}
1.0.0
5 years ago