vue分页组件

先上效果图

代码如下：

<template>
  <div class="pager fz-t ta-c fc-blue">
    <span :class="['arrow','left-arrow',currPage>1?'act':'']" @click="cutPage()"></span>
    <span v-if="showLeft" :class="currPage==1?'act':''" @click="changePage(1)">1</span>
    <b v-if="showLeft">...</b>
    <span
      :class="currPage==item?'act':''"
      v-for="(item,index) in pageBrr"
      :key="index"
      @click="changePage(item)"
    >{{item}}</span>
    <b v-if="showRight&&pageNum>showLength">...</b>
    <span
      :class="currPage==pageArr.length?'act':''"
      v-if="showRight&&pageNum>showLength"
      @click="changePage(pageArr.length)"
    >{{pageArr[pageArr.length-1]}}</span>
    <span :class="['arrow','right-arrow',currPage<pageNum?'act':'']" @click="addPage()"></span>
  </div>
</template>

<script>
/*分页组件
  params @total：总条数
  params @pageSize：每页显示多少条
*/
export default {
  props: ["total", "pageSize"],
  data() {
    return {
      pageArr: [], //初始页数数组，一共几页就1到几
      showLength: 9, //总个数，目前是前面8个后面1个，共9个
      currPage: 1, //当前页
      pageNum: 0, //总页数
      showLeft: false, //是否显示左边的三个点和1
      showRight: false //是否显示右边的三个点和最后一页
    };
  },
  watch: {
    total: {
      handler(newVal,oldVal) {
        //计算总页数
        this.pageNum = Math.ceil(newVal / this.pageSize);
        //填充数组
        this.pageArr = Array.from({ length: this.pageNum }, (v, i) => i + 1);
      },
      immediate: true
    }
  },
  computed: {
    pageBrr() {
      //不足显示个数时直接显示所有页
      if (this.pageNum <= this.showLength) {
        return this.pageArr;
      } else {
        //显示右边三个点但不显示左边三个点的情况
        if (this.currPage < Math.floor(this.showLength / 2) + 2) {
          this.showLeft = false;
          this.showRight = true;
          return this.pageArr.slice(0, this.showLength - 1);
        } else if (
          //显示左边三个点但不显示右边三个点的情况
          this.currPage >
          this.pageNum - Math.floor(this.showLength / 2) - 2
        ) {
          this.showLeft = true;
          this.showRight = false;
          return this.pageArr.slice(
            this.pageNum - this.showLength + 1,
            this.pageNum
          );
        } else {
          //两边的点都显示的情况
          this.showLeft = true;
          this.showRight = true;
          return this.pageArr.slice(
            this.currPage - Math.floor(this.showLength / 2),
            this.currPage + Math.floor(this.showLength / 2)
          );
        }
      }
    }
  },
  methods: {
    //直接点击页
    changePage(number) {
      if (this.currPage != number) {
        this.currPage = number;
        this.changeList();
      }
    },
    //点击左边<
    cutPage() {
      if (this.currPage > 1) {
        this.currPage--;
        this.changeList();
      }
    },
    //点击右边>
    addPage() {
      if (this.currPage < this.pageNum) {
        this.currPage++;
        this.changeList();
      }
    },
    //页数改变调取父组件方法
    changeList() {
      window.scrollTo(0, 0)
      this.$emit("callback", this.currPage);
    }
  }
};
</script>

<style scoped>
.act {
  color: #f56145;
}
.pager {
  margin-top: 57px;
}
.pager span {
  padding: 5px;
  margin: 3px 6px;
  cursor: pointer;
}
.pager span.arrow {
  cursor: not-allowed;
}
.pager span.arrow.left-arrow {
  margin-right: 20px;
}
.pager span.arrow.right-arrow {
  margin-left: 20px;
}
.pager span.arrow.act{
  cursor: pointer;
}
.pager span.arrow.act:before {
  border-color: #002963;
}
</style>

感觉还不是很完美，还需要进一步完善

2020.03.27更新： 因为一些页面有类型切换，所以加了watch监听，切换类型的时候在父组件将total设为0，获取到返回数据时更改total，让分页组件重新渲染即可。

父组件中： <pager v-if="total" :total="total" :pageSize="10" @callback="changeList"></pager>