原生JS封装分页器组件

应用样式：

 

分页器组件：

<template>
  <div id="pagination">
    <div class="el-row">
      <div class="pagination el-col el-col-24">
        <div class="el-pagination is-background pagination">
          <span class="el-pagination__total">共 {{ pageInfo.total }} 条</span>
          <button
            type="button"
            :disabled="cur == 1"
            :class="{ active: cur == 1 }"
            @click="$emit('handleCurrentChange', cur - 1)"
          >
            <i class="el-icon el-icon-arrow-left"></i>
          </button>
          <ul class="el-pager">
            <li
              v-if="startNumAndEndNum.start > 1"
              :class="{ active: cur == 1 }"
              @click="$emit('handleCurrentChange', 1)"
            >
              1
            </li>
            <button v-if="startNumAndEndNum.start > 2">···</button>

            <template v-for="(page, index) in startNumAndEndNum.end">
              <button
                :key="index"
                v-if="page >= startNumAndEndNum.start"
                @click="$emit('handleCurrentChange', page)"
                :class="{ active: cur == page }"
              >
                {{ page }}
              </button>
            </template>
            <button v-if="startNumAndEndNum.end < all - 1">···</button>
            <li
              :class="{ active: cur == all }"
              v-if="startNumAndEndNum.end < all"
              @click="$emit('handleCurrentChange', all)"
            >
              {{ all }}
            </li>
          </ul>

          <button
            type="button"
            :disabled="cur == all"
            :class="{ active: cur == all }"
            @click="$emit('handleCurrentChange', cur + 1)"
          >
            <i class="el-icon el-icon-arrow-right"></i>
          </button>
          <span class="el-pagination__sizes">
            <div class="el-select el-select--mini">
              <!---->
              <div class="el-input el-input--mini el-input--suffix">
                <!---->
                <el-select
                  v-model="pageSize"
                  placeholder="请选择"
                  @change="handleSizeChange"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>

                <span class="el-input__suffix"
                  ><span class="el-input__suffix-inner">
                    <i
                      class="el-select__caret el-input__icon el-icon-arrow-up"
                    ></i>
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                  </span>
                  <!---->
                </span>
                <!---->
                <!---->
              </div>
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //显示的声明组件
  name: "pagination",
  props: ["pageInfo"],
  data() {
    return {
      all: Math.ceil(this.pageInfo.total / this.pageInfo.pageSize), //, //总页数
      cur: this.pageInfo.currentPage, //this.pageInfo.currentPage ,//当前页码
      pageSize: this.pageInfo.pageSize + "条/页", // , //一页显示的数量
      options: [
        {
          value: "5",
          label: "5条/页"
        },
        {
          value: "10",
          label: "10条/页"
        },
        {
          value: "20",
          label: "20条/页"
        },
        {
          value: "50",
          label: "50条/页"
        }
      ]
    };
  },
  methods: {
    // 每页数据量变化时触发方法
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    }
  },

  computed: {
    startNumAndEndNum() {
      this.cur = this.pageInfo.currentPage;
      this.all = Math.ceil(this.pageInfo.total / this.pageInfo.pageSize);
      const continues = 3;
      const totalPage = this.all;
      const pageNo = this.cur;
      //  先定义两个变量存储起始数字与结束数字
      let start = 0,
        end = 0;
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        //  正常现象【连续页码3，但是你的总页数一定是大于3的】
        //  起始数字
        start = pageNo - parseInt(continues / 2);
        end = pageNo + parseInt(continues / 2);
        if (start < 1) {
          start = 1;
          end = continues;
        }
        //  把出现不正常的现象【end数字大于总页码】纠正
        if (end > totalPage) {
          end = totalPage;
          start = totalPage - continues + 1;
        }
      }
      return { start, end };
    }
  }
};
</script>
<style scoped>
.pagination {
  text-align: center;
}
.pagination button {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  outline: none;
  border-radius: 2px;
  padding: 0 4px;
  vertical-align: top;
  display: inline-block;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  border: 0;
}

.pagination .active {
  cursor: not-allowed;
  background-color: #409eff;
  color: #fff;
}
</style>

父组件：

<template>
  <div>
    <pagination
      :pageInfo="page"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";
export default {
  name: "dome",
  components: {
    Pagination,
  },
  data() {
    return {
      page: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      }
    };
  },
  methods: {
     // 每页数据量变化时触发方法
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
    },
    // 当前页发生改变时触发的方法
    handleCurrentChange(val) {
      this.page.currentPage = val;
    },
  },
};
</script>

<style></style>