分页组件-Pagination

分页组件-Pagination

<template>
    <div class="pagination">
        <button :disabled="pageNo == 1 || total == 0" @click="$emit('getPageNo',pageNo - 1)">上一页</button>
        <button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo == 1}" >1</button>
        <button v-if="startNumAndEndNum.start > 2" >•••</button>
        <button v-for="(number,index) in startNumAndEndNum.end" :key="index" v-if="number >= startNumAndEndNum.start" @click="$emit('getPageNo',number)" :class="{active:pageNo == number}" >{{number}}</button>
        <button v-if="startNumAndEndNum.end < totalPage - 1">•••</button>
        <button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo',totalPage)" :class="{active:pageNo == totalPage}" >{{totalPage}}</button>
        <button :disabled="pageNo == totalPage || total == 0" @click="$emit('getPageNo',pageNo + 1)" >下一页</button>

        <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
</template>
  
  <script>
export default {
    name: "Pagination",
    props:['pageNo','pageSize','total','continues'],
    computed:{
        // 获取总页数
        totalPage(){
            return Math.ceil(this.total/this.pageSize)
        },
        // 获取连续页的开始值和结束值
        startNumAndEndNum(){
            const {pageNo,continues,totalPage} = this
            let start = 0  // 初始化开始数字
            let end = 0    // 初始化结束数字
            // 判断如果连续的页数大于总页数
            if(continues > totalPage){
                start = 1
                end = totalPage
            }else{
                start = pageNo - parseInt(continues / 2)
                end = pageNo + parseInt(continues / 2)
                // 判断如果start<1
                if(start < 1){
                    start = 1
                    end = continues
                }
                // 判断end>总页数
                if(end > totalPage){
                    end = totalPage
                    start = totalPage - continues + 1
                }
            }
            return {start,end}
        }
    }
}
</script>
  
  <style lang="less" scoped>
  .pagination {
      text-align: center;
      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: orange;
              color: #fff;
          }
      }
  }
  </style>

在其他组件使用分页组件

<!-- 分页 -->
<template>
    <Pagination :pageNo="page" :pageSize="limit" :total="total" :continues="continues" @getPageNo="getPageNo" />
</template>
<script>
	import Pagination from './Pagination'
	export default {
    	data() {
	        return {
	            page:1, // 当前第几页
	            limit:3,  // 每页显示的数量
	            total:90,   // 总数
	            continues:5,  // 连续的页数
	        }
    	},
    	components:{
				Pagination 
		},
	    methods:{
	        // 获取当前点击的第几页
	        // 分页组件传来点击的第几页pageNo
	        getPageNo(pageNo){
	            this.page = pageNo
	            this.getData()
	        }
	    }
    }
}
</script>