1.0.0 • Published 5 years ago

e6page v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

此组件为 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.配置

参数类型是否必须默认值说明
totalNumber5总数量
v-modelvariable绑定的当前页码
sizesArray10,20,30,40,50页显示条数选项数组
pageSizeNumber10默认每页显示条数
optionsString'total, sizes, prev, pager, next, jumper'配置是否需要
showPageNumber5显示的页码数量,只能为5~21的奇数
indexChangeFunction页码变化回调
sizeChangeFunction每页显示数量变化回调
**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