vue中移動端分頁組件pagination

最近項目需要用到很簡單的vue移動端分頁組件，網上找了找，沒有特別適合的，根據網上找來的代碼，自己寫了個簡單的分頁

根據設計稿，想要的就是最簡單的，上一頁，下一頁，中間固定放三個顯示頁數的，不需要顯示很多，也不需要省略號

原博客：https://blog.csdn.net/freya_yyy/article/details/81227016

效果圖如下：

代碼如下：

pagination.vue

<template>
  <div class="pagination">
    <ul>
      <li v-if="currentPage > 1">
        <span @click="prevPage">上一頁</span>
      </li>
      <li v-if="currentPage == 1">
        <span class="disabled">上一頁</span>
      </li>
      <li v-for="item in indexs" v-bind:class="{'active':currentPage==item}" class="item">
        <span @click="btnClick(item)">{{item}}</span>
      </li>
      <li v-if="currentPage!=allPage">
        <span @click="nextPage">下一頁</span>
      </li>
      <li v-if="currentPage==allPage">
        <span class="disabled">下一頁</span>
      </li>
      <li><span>共<i>{{allPage}}</i>頁</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    currentPage: { // 當前第幾頁
      type: Number,
      default: 1
    },
    allPage: { // 總頁數
      type: Number,
      default: 5
    },
    showIndex: { // 中間顯示幾個頁數，要為奇數
      type: Number,
      default: 3
    }
  },
  methods: {
    nextPage () {
      this.$emit('setPage', this.currentPage + 1)
    },
    prevPage () {
      this.$emit('setPage', this.currentPage - 1)
    },
    btnClick (num) {
      if (num !== this.currentPage) {
        this.$emit('setPage', num)
      }
    }
  },
  computed: {
    indexs () {
      var left = 1
      var right = this.allPage
      var arr = []
      var index = parseInt(this.showIndex / 2)
      var middleIndex = index + 1
      if (this.allPage >= this.showIndex) {
        if (this.currentPage > middleIndex && this.currentPage < this.allPage - index) {
          left = this.currentPage - index
          right = this.currentPage + index
        } else if (this.currentPage <= middleIndex) {
          left = 1
          right = this.showIndex
        } else {
          left = this.allPage - (this.showIndex - 1)
          right = this.allPage
        }
      }
      while (left <= right) {
        arr.push(left)
        left++
      }
      return arr
    }
  }
}
</script>

<style scoped lang="less">
.pagination{
  ul{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .24rem;
    li{
      height: .6rem;
      margin: .12rem;
      span{
        display: block;
        padding: 0 .12rem;
        height: 100%;
        text-align: center;
        line-height: .6rem;
        color: #E0224F;
        border: 1px solid #E0224F;
        &.disabled{
          color: #D8D8D8;
          border: 1px solid #D8D8D8;
        }
      }
      &.item{
        min-width: .6rem;
        span{
          padding: 0;
          color: #413134;
          border: 1px solid #fff;
        }
        &.active{
          span{
            color: #E0224F;
            border: 1px solid #E0224F;
          }
        }
      }
    }
  }
}
</style>

使用：

<template>
   <pagination :allPage="10" @setPage="setPage" :currentPage="currentPage" :showIndex="3"></pagination>
</template>

<script>
import pagination from '@/components/pagination'

export default {
  data () {
    return {
      currentPage: 1,
    }
  },
  methods: {
     setPage (page) {
        this.currentPage = page
        console.log(this.currentPage)
     }
  }
}
</script>