Vue封装一个仿淘宝分页组件

实现效果：

使用代码：

<Pagination :page-size="10" :page-no="10"  @pageChange="pageChange" :total="1000"/>

组件代码：

<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <span :class="{disabled:pageNo === 1}" @click="$emit('pageChange',pageNo-1)">«上一页</span>
      <span v-if="startEndNumber.start >1 " :class="{active:1 === pageNo}" @click="$emit('pageChange',1)">1</span>
      <span class="dotted" v-if="startEndNumber.start >2 ">...</span>

      <span v-for="p in startEndNumber.end"
            :key="p"
            v-if="p>=startEndNumber.start"
            :class="{active:p===pageNo}"
            @click="$emit('pageChange',p)">
        {{ p }}
      </span>

      <span v-if="startEndNumber.end<totalPages-1" class="dotted">...</span>
      <span v-if="startEndNumber.end < totalPages" :class="{active:totalPages === pageNo}" @click="$emit('pageChange',totalPages)">{{totalPages}}</span>
      <span v-if="startEndNumber.end < totalPages" :class="{disabled:pageNo === totalPages}" @click="$emit('pageChange',pageNo+1)">下一页»</span>
      <span class="dotted">共{{ totalPages }}页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    pageNo: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    continues: {
      type: Number,
      default: 5
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    startEndNumber() {
      const {continues, pageNo, totalPages} = this;
      //先定义两个变量存储起始数字与结束数字
      let start = 0,
          end = 0;
      //连续页码数字5【就是至少五页】，如果出现不正常的现象【就是不够五页】
      //不正常现象【总页数没有连续页码多】
      if (continues > totalPages) {
        start = 1;
        end = totalPages;
      } else {
        //正常现象【连续页码5，但是你的总页数一定是大于5的】
        //起始数字
        start = pageNo - parseInt(continues / 2);
        //结束数字
        end = pageNo + parseInt(continues / 2);
        //把出现不正常的现象【start数字出现0|负数】纠正
        if (start < 1) {
          start = 1;
          end = continues;
        }
        //把出现不正常的现象[end数字大于总页码]纠正
        if (end > totalPages) {
          end = totalPages;
          start = totalPages - continues + 1;
        }
      }
      return {start, end};
    }
  }
}
</script>

<style scoped lang="less">
.page {
  overflow: hidden;

  .sui-pagination {
    margin: 18px 0;
    text-align: center;

    span {
      position: relative;
      display: inline-block;
      line-height: 18px;
      text-decoration: none;
      background-color: #fff;
      border: 1px solid #e0e9ee;
      margin-left: -1px;
      font-size: 14px;
      padding: 9px 18px;
      color: #333;
      cursor: pointer;
      outline: none;

      &.active {
        background-color: #fff;
        color: #e1251b;
        cursor: default;
      }

      &.disabled {
        background-color: #ddd;
        color: #333;
        cursor: default;
      }

      &.dotted {
        background-color: #fff;
        color: #333;
        cursor: default;
      }
    }


  }
}
</style>