Vue 自定义带数字的(1,2,3,4,...)分页组件

效果图如下：

组件代码：

<template>
    <div class="paging flex flex-center-cz flex-center-sp">
      <div class="flex flex-space-between ">
        <div class="flex">

            <div class="flex flex-center-cz margin-left-s font-s color-gray">共<span class="count">{{recordCount}}</span> 条</div>

          <img class="logo-18 margin-s pointer" style="transform: scaleX(-1)" src="@/assets/images/icon/next.png" @click="prior" />
          <div class="pointer color-gray font-l margin-right-s margin-left-s flex flex-center-cz" v-for="num in pageList" :key="num" @click="valueChange(num)"
              :class="{ 'highLight': num === selectedNumber }">
            {{ num }}
          </div>
          <img class="logo-18 margin-s pointer" src="@/assets/images/icon/next.png" @click="next"/>


          <div class="flex flex-center-cz margin-left-s font-s">转到</div>
          <input type="number" style="width: 50px;" v-model="pgIndex" class="num margin-left-s margin-right-s" @change="pageChange" />
          <div class="flex flex-center-cz font-s">页</div>

        </div>
      </div>
  
  
    </div>
  </template>
  
  <script>
  export default {
    name:'DesktopPaging',
    props:{
      pageCount:{},
      recordCount:{}
    },
    data() {
      return {
        pgIndex: 1,
        pageSize: 15,
        selectedNumber: 1,
        pageCoply:[],
        pageList:[]
      }
    },
    watch:{
      pageCount(val){
        this.pageCoply = Array.from(Array(val), (v,k) =>(k+1));
        this.pageFn()
      }
    },
    created(){
    },
    methods:{
      valueChange(value) {
        if(value == '....'){
          return
        }
        this.pgIndex = value
        this.selectedNumber = value;
        this.pageFn()
        this.$emit("change", this.pgIndex, this.pageSize );
        this.$forceUpdate();

      },
      pageChange() {
        let index = parseInt(this.pgIndex);
        if (index < 1) {
            this.index =1;
            this.$showToast({"msg":"超出范围",  duration: 1500})
            return
        }
        if (index > this.pageCount ) {
            this.index = this.pageCount ;
            this.$showToast({"msg":"超出范围",  duration: 1500})
            return
        }
        this.valueChange(index);
        this.$forceUpdate();
      },
      next() {
        if (parseInt(this.pgIndex) < parseInt(this.pageCount)) {
          this.pgIndex = parseInt(this.pgIndex) + 1;
          this.selectedNumber = this.pgIndex;
          this.pageFn()
          this.$emit("change", this.pgIndex, this.pageSize );
        }
      },
      prior() {
        if (parseInt(this.pgIndex) > 1) {
          this.pgIndex = parseInt(this.pgIndex) - 1;
          this.selectedNumber = this.pgIndex;
          this.pageFn()
          this.$emit("change", this.pgIndex, this.pageSize );
        }
      },
      pageFn(){
        if(this.pageCoply.length <10){
          this.pageList = this.pageCoply
          return
        }
        if(this.pgIndex>=this.pageCoply[5-1]){
          if(this.pageCoply[this.pageCoply.length-1] - this.pgIndex <= 3){
               let aa  = [1,"...."]
              let cc = this.pageCoply.slice(this.pageCoply[this.pageCoply.length-1]-5,this.pageCoply.length)
              this.pageList = aa.concat(cc)
          }else{
            let a1  = [1,"...."]
            let c2 = this.pageCoply.slice((this.pgIndex-1)-2,this.pgIndex-1).concat(this.pageCoply[this.pgIndex-1]).concat(this.pageCoply.slice(this.pgIndex,(this.pgIndex-1)+3))
            let b3 = ["....",this.pageCoply[this.pageCoply.length-1]]
            this.pageList = a1.concat(c2).concat(b3)
          }
          
          return
        }
        
        let a = this.pageCoply.slice(0,5)
        let c = ["...."]
        let b = this.pageCoply.slice(this.pageCoply.length-1,this.pageCoply.length)
        this.pageList = a.concat(c).concat(b)
      }
    }
  }
  
  </script>
  
  <style scoped>
  .paging {
    width:100%
  }
  
  .num {
    border: 1px solid rgba(0, 0,0, 0.2);
    border-radius: 2px;
  }
  .paging select{
    border: 1px solid rgba(0, 0,0, 0.2);
    height: 25px;
    width: 60px;
  }
  
  .highLight {
    font-size: 20px;
    font-weight: 400;
    color: #D2231D;
  }
  </style>
  
  

组件使用

<paging ref="paging" class="flex flex-center-sp  border-box"  :pageCount="pageCount" :recordCount="recordCount" @change="pageChange" ></paging>

pageCount：总页数

recordCount：总记录数

pageChange(当前页数,每页数)：改变页后以触发事件