JxlPagination 页码器
采用分页的形式分隔长列表，每次只加载一个页面。
基于 ElementUI 的 el-pagination 标签封装。
<template>
<el-pagination
class="jxl-pagination"
:small="small"
:layout="layout"
:background="!simple"
:total="total"
:current-page="currentPage"
:hide-on-single-page="hideOnSinglePage"
:popper-class="popperClass"
:prev-text="prevText"
:next-text="nextText"
:page-count="pageCount"
:pager-count="pagerCount"
:disabled="disabled"
:page-size="currentPageSize"
:page-sizes="pageSizeOptions"
@current-change="onPageNumChange"
@size-change="onSizeChange"
@prev-click="onPrevClick"
@next-click="onNextClick"
/>
</template>
<script>
/**
* JxlPagination 分页
* 采用分页的形式分隔长列表，每次只加载一个页面。
*/
export default {
name: 'JxlPagination',
model: {
prop: 'current',
event: 'change'
},
props: {
/**
* 是否使用小型分页样式
*/
small: {
type: Boolean,
default: false
},
/**
* 总数据量
*/
total: {
required: true,
type: Number
},
/**
* 当前页码数
*/
current: {
type: Number,
default: 1
},
/**
* 每页显示条数
*/
pageSize: {
type: Number,
default: 10
},
/**
* 指定每页可以显示多少条
*/
pageSizeOptions: {
type: Array,
default() {
return [10, 20, 30, 50, 100]
}
},
/**
* 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能
* 如果要支持 page-sizes 的更改，则需要使用 total 属性
*/
pageCount: {
type: Number,
default: 0
},
/**
* 页码按钮的数量，当总页数超过该值时会折叠
* 可选值：大于等于 5 且小于等于 21 的奇数
*/
pagerCount: {
type: Number,
default: 7
},
/**
* 每页显示个数选择器的下拉框类名
*/
popperClass: {
type: String,
default: ''
},
/**
* 当添加该属性时，显示为简单分页
*/
simple: {
type: Boolean,
default: false
},
/**
* 是否显示总数据量
*/
showTotal: {
type: Boolean,
default: true
},
/**
* 是否可以快速跳转至某页
*/
showQuickJumper: {
type: Boolean,
default: false
},
/**
* 是否展示 pageSize 切换器
*/
showSizeChanger: {
type: Boolean,
default: false
},
/**
* 只有一页时是否隐藏分页器
*/
hideOnSinglePage: {
type: Boolean,
default: false
},
/**
* 是否禁用
*/
disabled: {
type: Boolean,
default: false
},
/**
* 替代图标显示的上一页文字
*/
prevText: {
type: String,
default: ''
},
/**
* 替代图标显示的下一页文字
*/
nextText: {
type: String,
default: ''
},
/**
* 用户点击上一页按钮改变当前页后触发
* @param current 当前页数
* @param pageSize 每页条数
*/
prevClick: {
type: Function,
default: () => {}
},
/**
* 用户点击下一页按钮改变当前页后触发
* @param current 当前页数
* @param pageSize 每页条数
*/
nextClick: {
type: Function,
default: () => {}
},
/**
* current 页码改变的回调，参数是改变后的页码及每页条数
* @param current 当前页数
* @param pageSize 每页条数
*/
change: {
type: Function,
default: () => {}
},
/**
* pageSize 变化的回调
* @param current 当前页数
* @param pageSize 每页条数
*/
sizeChange: {
type: Function,
default: () => {}
}
},
data() {
return {
currentPage: 1, // 当前页
currentPageSize: 10 // 当前页码大小
}
},
computed: {
/**
* 布局配置
*/
layout() {
const layout = ['prev', 'pager', 'next']
if (this.showTotal) {
layout.unshift('total')
}
if (this.showSizeChanger) {
layout.push('sizes')
}
if (this.showQuickJumper) {
layout.push('jumper')
}
return layout.join(',')
}
},
watch: {
/**
* 当前页码数
*/
current: {
handler: function(val, oldVal) {
this.currentPage = val
},
deep: true
},
/**
* 每页显示条数
*/
pageSize: {
handler: function(val, oldVal) {
this.currentPageSize = val
},
deep: true
}
},
created() {
this.currentPage = this.current
this.currentPageSize = this.pageSize
},
methods: {
/**
* 页码页数发生改变
* @param current 当前页码数
*/
onPageNumChange(current) {
this.currentPage = current
this.$emit('change', this.currentPage, this.currentPageSize)
},
/**
* 页码大小发生改变
* @param pageSize 每页条数
*/
onSizeChange(pageSize) {
this.currentPageSize = pageSize
this.$emit('sizeChange', this.currentPage, this.currentPageSize)
},
/**
* 用户点击上一页按钮改变当前页后触发
* @param current 当前页码数
*/
onPrevClick(current) {
this.currentPage = current
this.$emit('prevClick', this.currentPage, this.currentPageSize)
},
/**
* 用户点击下一页按钮改变当前页后触发
* @param current 当前页码数
*/
onNextClick(current) {
this.currentPage = current
this.$emit('nextClick', this.currentPage, this.currentPageSize)
}
}
}
</script>
<style lang="less">
@primary-color: #1890ff;
@small-size: 22px;
.jxl-pagination {
padding: 0 20px 20px 0;
text-align: right;
font-weight: 500;
position: relative;
white-space: normal;
.el-pager {
li {
min-width: 32px;
height: 32px;
line-height: 32px;
padding: 0 6px;
margin: 0;
border: 1px solid transparent;
background-color: transparent;
&:not(.disabled).active {
color: @primary-color;
border-color: @primary-color;
}
&:hover {
color: @primary-color;
}
}
}
.btn-next,
.btn-prev {
min-width: 32px;
height: 32px;
color: #303233;
padding: 0 6px;
margin: 0;
background-color: transparent;
}
&.is-background {
.btn-next,
.btn-prev,
.el-pager li {
min-width: 32px;
height: 32px;
color: #303233;
background-color: #ffffff;
border: 1px solid #d0d7dd;
padding: 0 6px;
margin: 0 8px 0 0;
border-radius: 2px;
}
.btn-next {
margin: 0;
}
.el-pager {
li {
&:not(.disabled).active,
&:not(.disabled):hover {
color: @primary-color;
border-color: @primary-color;
background-color: #ffffff;
cursor: pointer;
}
&.more,
&.more:hover
{
border: none;
}
}
}
.btn-next:disabled,
.btn-prev:disabled,
.el-pager li.disabled {
color: #d0d7dd;
border-color: #d0d7dd;
background-color: #ffffff;
}
.btn-next:not(:disabled):hover,
.btn-prev:not(:disabled):hover {
color: @primary-color;
border-color: @primary-color;
}
}
span:not([class*=suffix]) {
font-size: 14px;
height: 32px;
line-height: 30px;
color: #303233;
vertical-align: middle;
display: inline-block;
}
.el-pagination__total {
margin-right: 8px;
}
.el-pagination__sizes {
height: 32px;
line-height: 32px;
margin: 0 0 0 16px;
.el-select {
height: 32px;
line-height: 32px;
.el-input {
width: 92px;
margin: 0;
.el-input__inner {
height: 32px;
line-height: 32px;
color: #303233;
border-radius: 2px;
padding-right: 25px;
&:hover {
border-color: @primary-color;
}
}
.el-input__icon {
line-height: 32px;
}
}
}
}
.el-pagination__jump {
color: #303233;
margin-left: 8px;
.el-pagination__editor {
width: 48px;
height: 32px;
line-height: 32px;
margin: 0 8px;
padding: 0;
.el-input__inner {
height: 32px;
line-height: 32px;
padding: 0 4px;
border-radius: 2px;
text-align: center;
&:hover {
border-color: @primary-color;
}
}
}
}
&.el-pagination--small {
&.is-background {
.btn-next,
.btn-prev,
.el-pager li {
min-width: @small-size;
margin: 0 6px 0 0;
}
.btn-next {
margin: 0;
}
.el-pagination__sizes {
margin: 0 0 0 12px;
}
}
.btn-next,
.btn-prev,
.el-pager li {
min-width: @small-size;
height: @small-size;
line-height: @small-size;
margin: 0;
}
span:not([class*=suffix]) {
height: @small-size;
line-height: @small-size;
}
.el-pagination__sizes {
height: @small-size;
line-height: @small-size;
margin: 0 0 0 8px;
.el-select {
height: @small-size;
line-height: @small-size;
.el-input {
width: 82px;
.el-input__inner {
height: @small-size;
line-height: @small-size;
padding-right: 20px;
}
.el-input__icon {
line-height: @small-size;
}
}
}
}
.el-pagination__jump {
.el-pagination__editor {
height: @small-size;
line-height: @small-size;
.el-input__inner {
height: @small-size;
line-height: @small-size;
}
}
}
}
}
</style>
