vue手动封装分页组件

单独封装一个分页组件,进行全局注册,在需要使用的组件中进行引入,达到复用提高效率

     1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)
     2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递进来的数据)
     3. totalPage, 根据1,2派生出总页数
     4. lxyms,连续页码数(外部使用Pagination组件的区域传递进来的数据)
     5. currentPage,当前页(内部数据)
     6. startEnd,连续页码的起始页 & 最终页
     7. indexFromWrap: 外部逻辑传入的当前页下标

下列是所封装的子组件

<template>
  <div class="pagination">
    <button @click="updateCPage(currentPage-1)">上一页</button>
    <button v-if="startEnd.start>1" @click="updateCPage(1)">1</button>
    <button v-if="startEnd.start>2">...</button>
    <button
        v-for="item in totalPage"
        :class="{active:currentPage===item}"
        v-if="item>=startEnd.start && item<=startEnd.end"
        @click="updateCPage(item)">{{item}}</button>
    <button v-if="startEnd.end<totalPage-1" >···</button>
    <button v-if="startEnd.end<totalPage" @click="updateCPage(totalPage)">{{totalPage}}</button>
    <button @click="updateCPage(currentPage+1)">下一页</button>
    <button style="margin-left: 30px">共 {{totalPage}} 条</button>

  </div>
</template>

<script>
export default {
  /*
     1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)
     2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递进来的数据)
     3. totalPage, 根据1,2派生出总页数
     4. lxyms,连续页码数(外部使用Pagination组件的区域传递进来的数据)
     5. currentPage,当前页(内部数据)
     6. startEnd,连续页码的起始页 & 最终页

     7. indexFromWrap: 外部逻辑传入的当前页下标
 */
  name: "Pagination",
  //由父组件传递总条数 每页显示数  连续页码数  当前页下标
  props:["total","pageSize","lxyms","indexFromWrap"],
  data(){
    return{
      currentPage:this.indexFromWrap
    }
  },
  mounted() {
    console.log(this.totalPage===10)
  },
  computed:{
    //总页数
    totalPage(){
      return Math.ceil(this.total/this.pageSize)
    },

    //最终页-起始页 = 连续页码数-1
    startEnd(){
      let {currentPage,lxyms,totalPage} = this
      // return console.log(this)
      let start;
      let end;
      //计算连续页码的起始页
      start = currentPage-Math.floor(lxyms/2)
      start<1?start=1:""
      //结束页
      end=start + lxyms -1  //此时当start<1时 在计算end时已经进行补位了
      // end>totalPage ?end=totalPage:""
      if(end>totalPage){
        end=totalPage;
        start = end-lxyms+1;  //此处当结束位置超出时,用start进行补位

        start < 1 ? start = 1 :""  // 要满足start处于一个正常的范围
      }
      return {start,end}
    }
  },

  methods:{
    updateCPage(currentPage){
      //可将button中的判断抽离到此处
      if(currentPage<1) return;
      if(currentPage>1) return;
      if(currentPage===this.currentPage) return;
      this.currentPage = currentPage;
      //将当前页的数据,与外部的父组件进行数据交互
      this.$emit("updateCPage",this.currentPage)
    }
  },
  watch:{
    //监听当前页下标
    indexFromWrap:{
        handler(val){
          console.log(val);
          this.currentPage=val
        },
        deep:true,
      immediate:true
    }
  }
}
</script>

<style lang="less" scoped>
.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;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

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

下列是父组件中调用,进行传参,如总条数,单页显示数,连续页码数

<template>
  <div>
    <Pagination :total="total" :pageSize="pageSize" :lxyms="lxyms" :indexFromWrap="indexFromWrap" @updateCPage="updateCPage"></Pagination>
  </div>
</template>

<script>
export default {
  name: "Search",
  data(){
    return{
      total:1000,
      pageSize:1,
      lxyms:5,
      indexFromWrap:6,
    }
  },
  methods:{
    updateCPage(index){
        // this.indexFromWrap=index
      console.log(index,"sss")
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  margin: 100px auto;
  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;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

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