102 lines
1.8 KiB
Vue
102 lines
1.8 KiB
Vue
<template>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
background
|
|
:hide-on-single-page="true"
|
|
@current-change="handleCurrentChange"
|
|
layout="prev, pager, next"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "MyPagination",
|
|
props:{
|
|
pagerCount:{
|
|
type:Number,
|
|
default:6
|
|
},
|
|
// 限制 每页 多少条
|
|
limit:{
|
|
type:Number,
|
|
default:10
|
|
},
|
|
// 页数
|
|
page:{
|
|
type:Number,
|
|
default:1
|
|
},
|
|
// 总 数
|
|
total:{
|
|
type:Number,
|
|
default:100
|
|
}
|
|
},
|
|
computed:{
|
|
isCurrent:{
|
|
get(){
|
|
return this.page
|
|
},
|
|
set(val){
|
|
return this.$emit('update:current',val)
|
|
}
|
|
},
|
|
},
|
|
methods:{
|
|
handleClick(item){
|
|
this.$emit('update:current',item)
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.$emit('change',val)
|
|
},
|
|
myCallback(VAL){
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.pagination{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&-lists{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
&-prev{
|
|
margin-right: .1rem;
|
|
}
|
|
&-next{
|
|
margin-left: .1rem;
|
|
.svg-icon{
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
&-prev,&-next,&-list{
|
|
width: .48rem;
|
|
height: .48rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
&:active,&:hover{
|
|
background: #F3F3F3;
|
|
border-radius: .05rem;
|
|
}
|
|
}
|
|
&-list{
|
|
margin-right: .08rem;
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
&.active{
|
|
background: #F3F3F3;
|
|
border-radius: .05rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|