vue翻页器，包括上一页，下一页，跳转

翻页组件 -- 子组件
<template>
  <div class="pager-wrapper" ref="pager">
    <div class="pager-box">
      <a class="pager-prev" :class="{'pager-disabled':prevdisable}" href="javascript:void(0)" @click="jumpprev()">上一页</a>
      <template v-for="(i,index) in pagesize">
        <span v-if="i==pageno" class="pager-curr"  :key="index">
          <em class="pager-em"></em>
          <em>{{i}}</em>
        </span>
        <a v-else-if="pageno<5&&(i)<6" href="javascript:void(0)" @click="jump(i)" :key="index">
          {{i}}
        </a>
        <a v-else-if="pagesize<7||i==1||i==pagesize||(pageno-2<=i&&i<=pageno+2)" href="javascript:void(0)" @click="jump(i)" :key="index">
          {{i}}
        </a>
        <template v-else>
          <span v-if="pageno<5&&i==6" class="pager-spr" :key="index">…</span>
          <span v-if="pageno==4&&i==7" class="pager-spr" :key="index">…</span>
          <span v-if="pageno>4&&i==pageno-3" class="pager-spr" :key="index">…</span>
          <span v-if="pageno>4&&i==pageno+3" class="pager-spr" :key="index">…</span>
        </template>
      </template>
      <a class="pager-next" :class="{'pager-disabled':nextdisable}" href="javascript:void(0)" @click="jumpnext()">下一页</a>
    </div>
    <div class="pager-input">
      <div>跳转到：</div>
      <input type="text" v-model="jumppage">
      <a class="pager-btn-go" href="javascript:void(0)" @click="go()">go</a>
    </div>
  </div>
</template>

<script>
export default {
  model: { // 通过v-model传过来的参数
    prop: 'pageno',
    event: 'jumppage'
  },
  props: {
    pagesize: {
      type: number,
      default: 1
    },
    pageno: { // 通过v-model传过来的参数
      type: number,
      default: 1
    }
  },
  data () {
    return {
      jumppage: '' // 避免操作props参数
    }
  },
  computed: {
    prevdisable: function () { // “上一页”按钮是否可点
      if (this.pageno > 1) {
        return false
      } else {
        return true
      }
    },
    nextdisable: function () { // “下一页”按钮是否可点
      if (this.pageno < this.pagesize && this.pagesize > 1) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    jumpprev: function () { // 点击上一页
      if (this.pageno === 1) {
        return false
      } else {
        this.$emit('jumppage', this.pageno - 1)
      }
    },
    jumpnext: function () { // 点击下一页
      if (this.pageno === this.pagesize) {
        return false
      } else {
        this.$emit('jumppage', this.pageno + 1) // 修改当前页码
      }
    },
    jump: function (id) { // 直接跳转
      if (id > this.pagesize) {
        id = this.pagesize
      }
      this.jumppage = ''
      this.$emit('jumppage', id) // 修改当前页码
    },
    go: function () {
      if (this.jumppage === '') { // 判空处理
        return false
      } else if (/^\d*$/.test(parseint(this.jumppage))) { // 填写数字才能跳转
        this.jump(parseint(this.jumppage))
        this.jumppage = ''
      } else {
        this.jumppage = ''
        return false
      }
    }
  }
}
</script>

<style scoped lang="stylus" type="text/stylus">
  @import "~styles/varibles.styl"
  .pager-wrapper
    float right
    display flex
    flex-direction row
    height 38px
    .pager-box
      margin-top -15px
    a,span
      display inline-block
      width 38px
      height 38px
      margin 0 2px
      border 1px solid #e5e5e5
      color #bdbdbd
      text-align center
      font 14px/38px ""
      em
        color $bgcolor
    .pager-prev,.pager-next
      width 78px
    .pager-input
      display flex
      flex-direction row
      height 38px
      margin-left 20px
      font 14px/40px ""
      color #bdbdbd
      input,.pager-btn-go
        display inline-block
        width 40px
        height 40px
        border 1px solid #e5e5e5
        box-sizing content-box
        outline none
        text-align center
</style>

父组件

<pager :pagesize="pagesize" v-model="pageno" @jumppage="jump"></pager>

//组件引入
import pager from '../../component/pager/pager.vue'

//组件调用声明
components:{ pager}

//参数
data () {
　　return {
　　　　pagesize: 30, //总页数 -- 后台传值
　　　　pageno: 2　　//当前页
　　}
}

//接收跳转事件
methods:{
　　jump (id) {
　　　　console.log(id)
　　}
}