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

Posted 2021-02-01 web-masong

翻页组件 -- 子组件
<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)
　　}
}