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>