pager分页组件

第一步创建一个Pager.vue

<template>
  <!--只有总页数大于1时才显示-->
  <div class="pager-container" v-if="pageNumber > 1">
    <a @click="handleClick(1)" :class="{ disable: current === 1 }">&lt;&lt;</a
    ><!--显示第一页当前值 == 第一页 current=1-->
    <a @click="handleClick(current - 1)" :class="{ disable: current === 1 }"
      >&lt;&lt;</a
    >
    <!--下一页-->

    <a
      @click="handleClick(n)"
      v-for="(n, i) in numbers"
      :key="i"
      :class="{ active: n === current }"
      >{{ n }}</a
    >
    <!--循环读出要展示的页码 n表示页码，如果点击第几页，增加选中样式-->
    <a
      @click="handleClick(current + 1)"
      :class="{ disable: current === pageNumber }"
      >&gt;&gt;</a
    ><!--显示下一页-->
    <a
      @click="handleClick(pageNumber)"
      :class="{ disable: current === pageNumber }"
      >&gt;&gt;</a
    ><!--显示最后一页，当前页面的值=最后一页的总页数 pageNumber-->
    <h1>{{ visibleMin }}</h1>
    <h2>{{ visibleMax }}</h2>
  </div>
</template>

<script>
export default {
  //属性变了，组件重新渲染
  props: {
    current: {
      //当前页数
      type: Number,
      default: 1,
    },
    total: {
      type: Number, //返回的总数据量
      default: 0,
    },
    limit: {
      //每页显示10条数据
      type: Number,
      default: 10,
    },
    visibleNumber: {
      //可见页码数
      type: Number,
      default: 10,
    },
  },
  computed: {
    pageNumber() {
      //总页数
      return Math.ceil(this.total / this.limit); //总页数= 总数据/每页10条数据的值
    },
    //得到显示的最小页码的数字
    visibleMin() {
      let min = this.current - Math.floor(this.visibleNumber / 2); //（当前页面-visibleNumber）/2
      if (min < 1) {
        min = 1;
      }
      return min;
    },
    visibleMax() {
      //得到显示的最大页码的数字
      let max = this.visibleMin + this.visibleNumber - 1;
      if (max > this.pageNumber) {
        max = this.pageNumber;
      }
      return max;
    },
    numbers() {
      let nums = [];
      for (let i = this.visibleMin; i <= this.visibleMax; i++) {
        nums.push(i);
      }
      return nums;
      //return [1, 2, 3, 4, 5, 6]; 假数据
    },
  },
  methods: {
    //抛出一个事件
    handleClick(newPage) {
      console.log(newPage);

      if (newPage < 1) {
        newPage = 1;
      }
      if (newPage > this.pageNumber) {
        newPage = this.pageNumber;
      }
      if (newPage === this.current) {
        return;
      }
      this.$emit("pageChange", newPage);
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/var.less"; //样式找src路径是~@  脚本是@
.pager-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  a {
    color: @primary;
    margin: 0 6px;
    cursor: pointer;
    &.disable {
      color: @lightWords;
      cursor: not-allowed;
    }
    &.active {
      color: @words;
      font-weight: bold;
      cursor: text;
    }
  }
}
</style>

APP.vue

<template>
  <div id="app"> 
    <Pager
      :current="current"
      :total="total"
      @pageChange="handlePageChange($event)"
    /> 
  </div>
</template>

<script> 
import Pager from "./components/Pager.vue";
export default {
  components: { 
    Pager,
  },
  data() {
    return { 
      current: 1,
      total: 302,
    };
  },
  methods: {
    handlePageChange(newPage) {
      console.log("页码改变了", newPage);
      this.current = newPage;
    },
  },
};
</script>

<style scoped>
.iconfont {
  color: red;
  font-size: 26px;
}
</style>

显示效果