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)
　　}
}

原文地址：https://www.cnblogs.com/web-masong/p/10220233.html