vue 简单分页组件

<template>
<!-- Pagination -->
<ul class="actions pagination">
<li><h3>T:<span class="red">{{totalElements}}</span> P:<span class="red">{{totalPages}}</span> N:<span class="red">{{pageCur}}</span></h3></li>
<li><a href="" class=" button small first" :class="{'disabled':pageCur===1}" @click.prevent="paging(1)">首页</a></li>
<li><a href="" class=" button small previous" :class="{'disabled':pageCur===1}"  @click.prevent="paging(pageCur-1)">上一页</a></li>
<li><a href="#"  class="button small next" :class="{'disabled':pageCur===totalPages}" @click.prevent="paging(pageCur+1)">下一页</a></li>
<li><a href="#" class="button small last" :class="{'disabled':pageCur===totalPages}" @click.prevent="paging(totalPages)">尾页</a></li>
<li><input type="text" class="input"  v-model.number="nextCur" @change="checkNextCur()"/><a href="#" class="button small go-btn" @click.prevent="goPage()">GO</a></li>
</ul>
</template>

<script type="text/ecmascript-6">
export default {
data() {
return {
pageCur:1,
nextCur:2
}
},
components: {},
props:{
totalElements:{
type:Number,
default:0,
},
totalPages:{
type:Number,
default:0,
},

},
created(){
},
methods:{
paging(pageCur){
if(pageCur<1){
this.pageCur=1;
return
}
if(pageCur>this.totalPages){
this.pageCur=this.totalPages;
return
}
this.pageCur=pageCur;
this.$emit('setPageCur', this.pageCur);
this.nextCur=this.pageCur+1;
this.checkNextCur()
},
goPage(){
this.pageCur=this.nextCur;
this.$emit('setPageCur',  this.pageCur);
},
checkNextCur(){
if(this.nextCur>this.totalPages){
this.nextCur=this.totalPages
}
}
}
}
</script>

<style lang="scss" scoped>
.pagination{
margin: 0;
li{
margin-right:-0.5em;
h3{
margin-top: 10px;
.red{
color: red;
}
}
&:first-child{
min-width: 196px;
}
.input{
width: 50px;
text-align: center;
display: inline-block;
}
.go-btn{
width:58px;
padding: 0 0 0 6px;
text-align: center;
height: 44px;
line-height: 44px;
position: relative;
top: -2px;
left: 1em;
}
}
}
</style>

<pagination :totalElements="totalElements" :totalPages="totalPages"  @setPageCur="getPageCur"></pagination>

<script type="text/ecmascript-6">
import pagination from "../pagination"
export default {
data() {
return {
totalElements:1602,
totalPages:25,
}
},
components: {
pagination
},
methods:{
getPageCur(pageCur){
// alert(pageCur)
}
}
}
</script>