分页组件功能需求
能够配置显示的页码数 具有上一页、下一页、首页、尾页的功能 具有显示总页数的功能
组件模版结构
< template>
< div class = " pagination-warp" >
< button class = " first-page" :class = " {' disable-page' :curPage===1}" @click = " first" > 首页</ button>
< button class = " prev-page" :class = " {' disable-page' :curPage===1}" @click = " prev()" > 上一页</ button>
< ul class = " page-list" >
< li class = " page-item" @click = " changePage(item)" :class = " {active:item===curPage}" v-for = " item in pages" :key = " item" >
< a href = " javascript:" > {{item}}</ a>
</ li>
</ ul>
< button class = " next-page" :class = " {' disable-page' :curPage===totalPage}" @click = " next()" > 下一页</ button>
< button class = " last-page" :class = " {' disable-page' :curPage===totalPage}" @click = " last" > 尾页</ button>
< span class = " total-page" > 共{{totalPage}}页</ span>
</ div>
</ template>
业务逻辑
< script>
export default {
name: "Pagination" ,
props: {
prePage: {
type: Number,
default : 5
} ,
totalPage: {
type: Number,
default : 9
} ,
curPage: {
type: Number,
default : 1
}
} ,
computed: {
pages ( ) {
const arr= [ ] ;
const range= ( this . prePage- 1 ) / 2 ;
const offset= {
start: this . curPage- range,
end: this . curPage+ range
} ;
if ( offset. start< 1 ) {
offset. end= offset. end+ ( 1 - offset. start) ;
offset. start= 1 ;
}
if ( offset. end> this . totalPage) {
offset. start= offset. start- ( offset. end- this . totalPage) ;
offset. end= this . totalPage;
}
if ( offset. start< 1 ) {
offset. start= 1 ;
}
for ( let i = offset. start; i <= offset. end; i++ ) {
arr. push ( i) ;
}
return arr;
}
} ,
methods: {
changePage ( page) {
if ( page=== this . curPage) {
return
}
this . $emit ( "change-page" , page)
} ,
prev ( ) {
const prev= this . curPage- 1 ;
if ( prev> 0 ) {
this . changePage ( prev)
}
} ,
next ( ) {
const next= this . curPage+ 1 ;
if ( next<= this . totalPage) {
this . changePage ( next)
}
} ,
first ( ) {
this . changePage ( 1 )
} ,
last ( ) {
this . changePage ( this . totalPage)
}
}
}
</ script>
组件样式
< style scoped >
.pagination-warp {
padding : 9px 15px;
text-align : right;
}
.page-list {
list-style : none;
display : inline-block;
padding : 0 5px;
margin : 0;
}
.page-item {
display : inline-block;
width : 32px;
height : 32px;
margin-left : 5px;
margin-right : 5px;
}
.page-item a {
text-align : center;
display : block;
width : 100%;
height : 100%;
text-decoration : none;
font-size : 14px;
color : #606266;
line-height : 32px;
border-radius : 50%;
}
.page-item:hover a:hover {
background-color : #ededed;
}
.page-item.active a,
.page-item.active:hover a {
color : #ffffff;
background-color : #4d555d;
}
.prev-page,
.next-page,
.first-page,
.last-page {
display : inline-block;
outline : none;
line-height : 30px;
font-size : 14px;
border-radius : 4px;
border : none;
background-color : transparent;
color : #606266;
cursor : pointer;
}
.disable-page {
color : #dadada;
cursor : default;
}
.total-page {
line-height : 32px;
font-size : 14px;
color : #606266;
display : inline-block;
padding : 0 10px;
}
</ style>
组件效果