手写Vue个人组件库——fl-Pagination分页器

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

Pagination 分页

当数据量过多时，使用分页分解数据。

基础用法

数据较少的效果

数据较多的效果

当总数据量大于50条时会自动呈现如上的第二种效果，可配合maxShowPageCard设置每一组分页的页签量。

同时pageSizeList为必填选项，第一个下标的值即为每页所展示的数量。

<template>
	 <fl-Pagination
      :total = 80
      :maxShowPageCard = 5
      :pageSizeList = [8,15,20,30]
      @changePageNum = "changePageNum"
      @changePageSize = "changePageSize">
      </fl-Pagination>
</template>
<script>
	export default{
		methods: {
            changePageNum(data){
              console.log(data)
            },
            changePageSize(data){
              console.log(data)
            }
         },
	}
</script>

文字注释

带有文字提示的分页器

设置showInfo即可。

<template>
	 <fl-Pagination
      :total = 80
      :maxShowPageCard = 5
      :pageSizeList = [8,15,20,30]
      showInfo
      @changePageNum = "changePageNum"
      @changePageSize = "changePageSize">
      </fl-Pagination>
</template>
<script>
	export default{
		methods: {
            changePageNum(data){
              console.log(data)
            },
            changePageSize(data){
              console.log(data)
            }
         },
	}
</script>

下拉选择每页显示数量

带有select选择每页pagesize的分页器。

设置choosePageSizeBySelect属性即可，select选择数量由pageSizeList自定义。

<template>
	 <fl-Pagination
      :total = 80
      :maxShowPageCard = 5
      :pageSizeList = [8,15,20,30]
      showInfo
      choosePageSizeBySelect
      @changePageNum = "changePageNum"
      @changePageSize = "changePageSize">
      </fl-Pagination>
</template>
<script>
	export default{
		methods: {
            changePageNum(data){
              console.log(data)
            },
            changePageSize(data){
              console.log(data)
            }
         },
	}
</script>

输入文本跳转

带有input文本框输入跳转指定页码的分页器。

设置choosePageNumByInput属性即可。

<template>
	 <fl-Pagination
      :total = 80
      :maxShowPageCard = 5
      :pageSizeList = [8,15,20,30]
      showInfo
      choosePageSizeBySelect
      choosePageNumByInput
      @changePageNum = "changePageNum"
      @changePageSize = "changePageSize">
      </fl-Pagination>
</template>
<script>
	export default{
		methods: {
            changePageNum(data){
              console.log(data)
            },
            changePageSize(data){
              console.log(data)
            }
         },
	}
</script>

回调函数

通过changePageNum和changePageSize自定义函数可在每次页码和页数发生变化时获得事件监听。

<template>
	 <fl-Pagination
      :total = 80
      :maxShowPageCard = 5
      :pageSizeList = [8,15,20,30]
      @changePageNum = "changePageNum"
      @changePageSize = "changePageSize">
      </fl-Pagination>
</template>
<script>
	export default{
		methods: {
            changePageNum(data){
              console.log(data)
            },
            changePageSize(data){
              console.log(data)
            }
         },
	}
</script>

Attributes

参数	类型	说明	可选值	默认值
total	Number	数据总数	——	——
maxShowPageCard	Number	总数据量大于50时，每个分页组显示数量	——	5
pageSizeList	Array	pageSize列表	——	index为0的值
showInfo	Boolean	显示分页文本信息	false / true	false
choosePageSizeBySelect	Boolean	是否配置下拉框	false / true	false
choosePageNumByInput	Boolean	是否配置文本框	false / true	false
changePageNum	event	监听页码改变的回调	——	——
changePageSize	event	监听每页数量改变的回调	——	——

源码：

<template>
    <div class = "pragination">
        <i v-if = "$attrs.showInfo == ''">共：{{totalPage}}页 / {{total}}条</i>
        <select @change="changePageSize" v-if = "$attrs.choosePageSizeBySelect == ''">
            <option v-for = "item in pageSizeList" :key = "item" :value = "item">{{item}}条/页</option>
        </select>
        <i class = "el-icon-arrow-left" @click = "prevPage" :style = "prevDefaultStyle"></i>
        <span v-if = "totalPage > maxShowPageBox && (nowPageNum > morePageMid) && morePageMid !== 0 && total > 50" @click = "showPrevPageGroup">...</span>
        <span :class = "item == nowPageNum || item + morePageMid == nowPageNum ? 'active' : ''"  v-for = "item in showMaxPage" :key = "item" @click = "changePageNum(item)">{{item + morePageMid}}</span>
        <span v-if = "totalPage > maxShowPageBox && morePageMid * 2 < totalPage && total > 50" @click = "showNextPageGroup">...</span>
        <i class = "el-icon-arrow-right" @click = "nextPage"  :style = "nextDefaultStyle"></i>
        <i v-if = "$attrs.showInfo == ''">当前为第 {{nowPageNum}} 页</i>
        <i v-if = "$attrs.choosePageNumByInput == ''">前往<input type = "text"  class = "inputChangePageSize" @keydown.enter="inputChangePageSize">页</i>
    </div>
</template>

<script>
    export default {
        name:'fl-Pagination',
        props: {
            total: {        //数据总数
                type: Number,
                default: 1
            },
            pageSizeList: {        //数据总数
                type: Array,
            },
            maxShowPageCard:{        //最多展示的页盒子
                type: Number,
                default: 5
            },
            pageNumList:{           //select页码选择列表
                type: Array,
            }
        },
        data() {
            return {
                nowPageNum:1,       //当前页码           
                usePageSize:this.pageSizeList[0],         //每页数量
                maxShowPageBox:this.maxShowPageCard,       //最多展示页盒子
                morePageMid:0,          //更多展示页扩展比例
            }   
        },
        
        methods: {
            prevPage(){         //上一页
                if(this.nowPageNum > 1){
                    if(this.nowPageNum - 1 < (this.morePageMid + 1)){
                        this.showPrevPageGroup()
                        this.nowPageNum = this.maxShowPageBox + this.morePageMid
                    }else{
                        this.nowPageNum--
                    }
                    this.$emit('changePageNum',this.nowPageNum)
                }
            },
            nextPage() {        //下一页
                if(this.nowPageNum < this.totalPage){
                    if(this.nowPageNum + 1 > this.maxShowPageBox + this.morePageMid){
                        this.showNextPageGroup()
                    }else{
                        this.nowPageNum++;
                    }
                    this.$emit('changePageNum',this.nowPageNum)
                }
            },
            changePageNum(pageNum){         //点击改变页码
                this.nowPageNum = pageNum + this.morePageMid
                this.$emit('changePageNum',this.nowPageNum)
            },
            showPrevPageGroup(){            //展示上一组扩展
                if(this.morePageMid !== 0){
                    this.morePageMid -= this.maxShowPageBox;
                    this.nowPageNum = this.morePageMid + 1
                    this.$emit('changePageNum',this.nowPageNum)
                }
            },
            showNextPageGroup(){            //展示下一组扩展
                this.morePageMid += this.maxShowPageBox;
                this.nowPageNum = this.morePageMid + 1
                this.$emit('changePageNum',this.nowPageNum)
            },
            changePageSize(e){           //改变页码
                this.nowPageNum = 1;
                this.morePageMid = 0;
                this.usePageSize = e.target.value
                this.$emit('changePageSize',this.usePageSize)
            },
            inputChangePageSize(e){         //输入框跳转指定页码
                if(e.target.value > this.totalPage){
                    return e.target.value = ''
                }else{
                    this.nowPageNum = e.target.value
                    if(this.nowPageNum > this.maxShowPageBox + this.morePageMid){
                        this.morePageMid += this.maxShowPageBox;
                    }
                    else if(this.morePageMid !== 0){
                    this.morePageMid -= this.maxShowPageBox;
                }
                    e.target.value = ''
                }
                this.$emit('changePageNum',this.nowPageNum)
                
            }
        },
        computed: {
            prevDefaultStyle(){         //上一页按钮额外样式
                if(this.nowPageNum == 1){
                    return 'cursor:no-drop'
                }
            },
            nextDefaultStyle(){         //下一页按钮额外样式
                if(this.nowPageNum == this.totalPage){
                    return 'cursor:no-drop'
                }
            },
            totalPage() {               //总页数
                return Math.ceil(this.total / this.usePageSize)
            },
            showMaxPage(){              //每页显示的页盒子数
                if(this.morePageMid * 2 > this.totalPage){
                    return this.totalPage - this.morePageMid
                }
                if(this.totalPage < this.maxShowPageCard){
                    return this.totalPage
                }
                return this.maxShowPageCard
            }
        },
    }
</script>

<style scoped>
.pragination{

}
i{
    font-style: normal;
    font-size:13px;
}
.active{
    color:rgb(95, 110, 247)
}
span,.el-icon-arrow-left,.el-icon-arrow-right{
    cursor: pointer;
    margin:0 10px;
}
span:hover{
    color:rgb(95, 110, 247)
}
.el-icon-arrow-left:hover,.el-icon-arrow-right:hover{
    color:rgb(95, 110, 247);
}
select{
    outline: none;
}
.inputChangePageSize{
    outline: none;
    width:40px;
    border-radius: 15px;
    border: 2px solid #ccc;
    transition: 0.2s linear;
}
.inputChangePageSize:focus{
    border-color:rgb(117, 156, 206);
}

</style>