基于vue2.0实现的自定义分页 可设置每页显示条数,带跳转框直接跳转到相应页面
文档地址:https://gitee.com/it__distant_branch/vue-custom-pages
实现效果如下
支持功能
- [x] 自定义分页条数
- [x] 跳转某一页
联系方式
- 微信: 18888320271
快速上手
1. npm安装 `npm i --save vue-custom-pages`
2. main.js中引入 `
import customPages from 'vue-custom-pages' ;
Vue.use(customPages)
`
4. 使用
`
<template>
<div id="app">
<vue-custom-pages :total="1000" active-color="red" page-size="20" show-count v-model="page" @change="search" show-elevator :size='[10,20,30,40]' ></vue-custom-pages>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
search(page,pageSzie){
console.log("当前页:",page)
console.log("当前页大小:",pageSzie)
}
},
data () {
return {
page:1
}
}
}
</script>
`
参数说明
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
total | 总条数 | Number | String | 0 |
page-size | 页大小 | Number | String | 10 |
show-elevator | 是否显示快速跳转到某一页 | Boolean | false | true |
v-model | 当前页 | Number | String | 1 |
size | 可以切换每页显示的数量 | Array | [] | |
show-count | 是否显示总页数 | Boolean | false | true |
active-color | 选中页背景色 | String | #2979ff | |
next-name | 下一页按钮名称 | String | > | |
pre-name | 上一页按钮名称 | String | < |