基于vue框架写的分页栏样式

先放效果图：

 参考百度的分页栏样式，下面是完整代码（两个箭头为图片，需自己替换或手写），仅为自己留学习记录用途。

<template>
  <div class="flex pagination">
    <img :class="{ 'arrow-left': true, 'not-allowed': currentPage == 1 }" src="../assets/information/image/arrow-left.png" @click="selectArrow('left')">
    <ul class="flex pagination-list">
      <li :class="{ 'pagination-item': true, 'selected': item == currentPage }" v-for="(item, index) in pageArr" :key="index" @click="selectPage(item)">{{ item }}</li>
    </ul>
    <img :class="{'arrow-right': true, 'not-allowed': currentPage == totalVal}"  src="../assets/information/image/arrow-right2.png" @click="selectArrow('right')">
  </div>
</template>

<script>
export default {
  name: "informationDetails",
  data() {
    return {
      pageArr: [],    // 当前显示的分页数组
      currentPage: 1,   // 当前页码数
      totalVal: 20,   // 总页数
    }
  },
  created() {
    this.pagination()
  },
  methods: {
    // 当前分页数组处理
    pagination() {
      var pageArr = []
      if(this.totalVal < 11) {  // 总页数小于11页的情况
        for(let i = 0;i < this.totalVal; i++){
          pageArr.push(i + 1);
        }
      } else if(this.currentPage > 5 && (this.totalVal - this.currentPage) > 3) {  // 当前页大于5且总页数减当前页大于3
        pageArr = [this.currentPage - 5, this.currentPage - 4, this.currentPage - 3, this.currentPage - 2, this.currentPage - 1, this.currentPage, this.currentPage + 1, this.currentPage + 2, this.currentPage + 3, this.currentPage + 4]
      } else if(this.currentPage > 5 && this.totalVal - this.currentPage < 4) {  // 当前页大于5且总页数减当前页小于4
        pageArr = [this.totalVal - 9, this.totalVal - 8, this.totalVal - 7, this.totalVal - 6, this.totalVal - 5, this.totalVal - 4, this.totalVal - 3, this.totalVal - 2, this.totalVal - 1, this.totalVal]
      } else if(this.currentPage < 6 && this.totalVal > 9) {  // 当前页小于6且总页数大于9
        for(var i = 0; i < 10; i++) {
          pageArr.push(i + 1);
        }
      }
      this.pageArr = pageArr
    },

  //  直接选中的分页
    selectPage(item) {
      this.currentPage = item
      this.pagination()
    },

  //  箭头选中的分页
    selectArrow(type) {
      if ((this.currentPage == 1 && type == 'left') || (this.currentPage == this.totalVal && type == 'right')) {
        return
      }

      this.currentPage = type == 'left' ? this.currentPage - 1 : this.currentPage + 1
      this.pagination()
    }
  }
}
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .flex {
    display: flex;
    align-items: center;
  }

  .not-allowed {
    cursor: not-allowed !important;
  }

  .pagination {
    width: 100%;
    justify-content: center;

    .arrow-left, .arrow-right {
      width: 12px;
      height: auto;
      margin: 0 42px;
      user-select: none;
      cursor: pointer;
    }

    .pagination-list {

      .pagination-item {
        list-style-type: none;
        width: 101px;
        height: 46px;
        background: #EEEEEE;
        text-align: center;
        line-height: 46px;
        font-size: 18px;
        font-weight: 400;
        color: #222222;
        margin-right: 1px;
        user-select: none;
        cursor: pointer;

        &:last-of-type {
          margin-right: 0;
        }
      }

      .selected {
        background: #F23A3A;
        color: #FFFFFF;
      }
    }
  }
</style>