hcframe-doc/theme-vdoing/components/Pagination.vue

<template>
  <div class="pagination">
    <span
      class="card-box prev iconfont icon-jiantou-zuo"
      :class="{disabled: currentPage === 1}"
      @click="goPrex()"
    >
      <p>上一页</p>
    </span>

    <!-- 分页在5页及以下时 -->
    <div
      class="pagination-list"
      v-if="pages <= 5"
    >
      <span
        class="card-box"
        v-for="item in pages"
        :key="item"
        :class="{active: currentPage === item}"
        @click="goIndex(item)"
      >{{item}}</span>
    </div>
    <!-- 分页在5页以上 -->
    <div
      class="pagination-list"
      v-else
    >
      <!-- 一号位 -->
      <span
        class="card-box"
        :class="{active: currentPage === 1}"
        @click="goIndex(1)"
      >1</span>

      <!-- 二号位 -->
      <span
        class="ellipsis ell-two"
        v-show="currentPage > 3"
        @click="goIndex(currentPage - 2)"
        title="上两页"
      />
      <!--这里没有使用v-if的原因是因为部署版本在当前页大于3时刷新页面出现了一些bug-->
      <span
        class="card-box"
        v-show="currentPage <= 3"
        :class="{active: currentPage === 2}"
        @click="goIndex(2)"
      >2</span>

      <!-- 三号位 -->
      <span
        class="card-box"
        :class="{active: currentPage >= 3 && currentPage <= (pages - 2)}"
        @click="goIndex(threeNum())"
      >{{ threeNum() }}</span>

      <!-- 四号位 -->
      <span
        class="ellipsis ell-four"
        v-show="currentPage < (pages - 2)"
        @click="goIndex(currentPage + 2)"
        title="下两页"
      />
      <span
        class="card-box"
        v-show="currentPage >= (pages - 2)"
        :class="{active: currentPage === pages-1}"
        @click="goIndex(pages-1)"
      >{{ pages-1 }}</span>

      <!-- 五号位 -->
      <span
        class="card-box"
        :class="{active: currentPage === pages}"
        @click="goIndex(pages)"
      >{{pages}}</span>
    </div>

    <span
      class="card-box next iconfont icon-jiantou-you"
      :class="{disabled: currentPage === pages}"
      @click="goNext()"
    >
      <p>下一页</p>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    total: { // 总长度
      type: Number,
      default: 10
    },
    perPage: { // 每页长
      type: Number,
      default: 10
    },
    currentPage: { // 当前页
      type: Number,
      default: 1
    }
  },
  computed: {
    pages () { // 总页数
      return Math.ceil(this.total / this.perPage)
    }
  },
  methods: {
    threeNum () { // 三号位页码计算
      let num = 3
      const currentPage = this.currentPage
      const pages = this.pages
      if (currentPage < 3) {
        num = 3
      } else if (currentPage > (pages - 3)) {
        num = pages - 2
      } else {
        num = currentPage
      }
      return num
    },
    goPrex () {
      let currentPage = this.currentPage
      if (currentPage > 1) {
        this.handleEmit(--currentPage)
      }
    },
    goNext () {
      let currentPage = this.currentPage
      if (currentPage < this.pages) {
        this.handleEmit(++currentPage)
      }
    },
    goIndex (i) {
      if (i !== this.currentPage) {
        this.handleEmit(i)
      }
    },
    handleEmit (i) {
      this.$emit('getCurrentPage', i)
    }
  }
}
</script>

<style lang='stylus'>
.pagination
  position relative
  height 60px
  text-align center
  span
    line-height 1rem
    opacity 0.9
    cursor pointer
    &:hover
      color $accentColor
    &.ellipsis
      opacity 0.5
      &::before
        content '...'
        font-size 1.2rem
      @media (any-hover hover)
        &.ell-two
          &:hover
            &::before
              content '«'
        &.ell-four
          &:hover
            &::before
              content '»'
  > span
    position absolute
    top 0
    padding 1rem 1.2rem
    font-size 0.95rem
    &.disabled
      color rgba(125, 125, 125, 0.5)
    &.prev
      left 0
      border-top-right-radius 32px
      border-bottom-right-radius 32px
    &.next
      right 0
      border-top-left-radius 32px
      border-bottom-left-radius 32px
      &::before
        float right
        margin-left 0.3rem
    p
      display inline
      line-height 0.95rem
  .pagination-list
    span
      display inline-block
      width 2.5rem
      height 2.5rem
      line-height 2.5rem
      margin 0.3rem
      &.active
        background $accentColor
        color var(--mainBg)
@media (max-width 800px)
  .pagination
    > span
      padding 1rem 1.5rem
      p
        display none
// 719px
@media (max-width $MQMobile)
  .pagination
    > span // 左右按钮
      padding 0.9rem 1.5rem
    .pagination-list
      span
        width 2.3rem
        height 2.3rem
        line-height 2.3rem
        margin 0.25rem
@media (max-width 390px)
  .pagination
    > span // 左右按钮
      padding 0.8rem 1.3rem
    .pagination-list
      span
        width 2rem
        height 2rem
        line-height 2rem
        margin 0.1rem
        margin-top 0.3rem
</style>