Pagination 分页 组件

<template>
  <div class="pageContainer">
    <span class="total">共{{ total }}条记录</span>
    <ul class="pagesInner">
      <li class="pageFirst" @click="select(1)">首页</li>
      <li class="pagePrev" @click="prevOrNext(-1)">
        <img src="@/assets/img/pc/page-left.png" alt="" />
      </li>
      <li
        class="page"
        v-for="(item, index) in pages"
        :key="index"
        :class="{ active: item === currentPage }"
      >
        <span v-if="item === '...'">{{ item }}</span>
        <span class="pageNum" v-else @click="select(item)">{{ item }}</span>
      </li>
      <li class="pageNext" @click="prevOrNext(1)">
        <img src="@/assets/img/pc/page-right.png" alt="" />
      </li>
      <li class="pageLast" @click="select(Math.ceil(total /pageSize))">尾页</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "page",
  props: {
    total: {
      type: Number,
      default: 5,
    },
    currentPage: {
      // 当前页码
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
  },
  computed: {
    pages() {
      const c = this.currentPage;
      const t = this.total;
      const s = this.pageSize;
      if (t > 7 * s) {
        if (c <= 5) {
          return [1, 2, 3, 4, 5, "...", t]; //第一种情况
        } else if (c >= t - 4) {
          return [1, "...", t - 5, t - 4, t - 3, t - 2, t - 1, t]; //第二种情况
        } else {
          return [1, "...", c - 2, c - 1, c, c + 1, c + 2, "...", t]; //第三种情况
        }
      } else {
        let arr = [];
        for (let i = 1; i <= Math.ceil(t / s); i++) {
          arr.push(i);
        }
        return arr;
      }
    },
  },
  methods: {
    select(n) {
      if (n === this.currentPage) return;
      if (typeof n === "string") return;
      this.$emit("pageChange", n);
    },
    prevOrNext(n) {
      this.$emit("prevOrNext", n);
    },
  },
};
</script>
<style scoped lang="less">
.pageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #808080;
  span.total {
    margin-right: 1rem;
  }
  .pagesInner {
    display: flex;
    align-items: center;
    background: #fff;
    li {
      &.pagePrev,
      &.pageNext {
        width: 1.5rem;
        height: 1.5rem;
        border: solid 0.063rem #aaaaaa;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        // margin: 0 1rem;
        img {
          width: 0.4rem;
          height: auto;
        }
      }
      &.pagePrev {
        // margin-right: 1rem;
      }
      &.pageNext {
        margin-left: 1rem;
      }

      &.pageFirst,
      &.pageLast {
        margin: 0 1rem;
        cursor: pointer;
      }
      span.pageNum {
        cursor: pointer;
        margin: 0 5px;
        border-radius: 4px;
        width: 1.5rem;
        height: 1.5rem;
        display: inline-block;
      }
      &.page {
        width: 1.5rem;
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
        cursor: pointer;
        &:last-child {
          margin-right: 0;
        }
      }
      &.active {
        color: #017afd;
      }
    }
  }
}
</style>