vue实现简单封装分页组件

1. new-pagination.vue文件：

<template>
    <div class="new-pagination flex a-center j-between flex-row">
        <div class="left flex a-center j-start flex-row">
            <div>共 {{total}} 条</div>
            <div class="size">前往 <span class="val">{{currentPage}}</span> 页面</div>
            <div>共 {{totalPage.length}} 页面</div>
        </div>
        <div class="right flex a-center j-end flex-row">
            <i class="el-icon-d-arrow-left i1 icon" @click="prevPage(1)" :class="[currentPage ==1 && 'icon-disable']"></i>
            <i class="el-icon-arrow-left margin-l-10 i2 icon" @click="prevPage(2)" :class="[currentPage ==1 && 'icon-disable']"></i>
            <div class="page-list flex-row a-center flex j-between">
                <div class="box" v-if="isMore==='left' || isMore==='all'">
                   <i class="el-icon-more"></i> 
                </div>
                <template v-for="(item,index) in pageList">
                    <div class="box text-no-select" :class="[currentPage===item && 'box-active']"  @click="currentChange(item)"
                         :key='index'>
                        <span>{{item}}</span>    
                    </div>
                </template>               
                <div class="box" v-if="isMore==='right' || isMore==='all'">
                   <i class="el-icon-more"></i> 
                </div>
            </div>
            <i class="el-icon-arrow-right margin-r-10 i3 icon" @click="nextPage(2)" :class="[currentPage ==totalPage.length && 'icon-disable']"></i>
            <i class="el-icon-d-arrow-right i4 icon" @click="nextPage(1)" :class="[currentPage ==totalPage.length && 'icon-disable']"></i>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        total:{
            type:Number,
            default:0
        },
        currentPage:{
            type:Number,
            default:1
        },
        pageSize:{
            type:Number,
            default:20      
        }
    },

    computed:{
        totalPage(){
            let result = Math.ceil(this.total/this.pageSize)
            let arr=[]
            for(var i=1;i<=result;i++){
                arr.push(i)
            }
            console.log(arr)
            return result? arr: [1]
        },
        pageList(){
            let result =[]
            if(this.totalPage.length<=4){
                result=this.totalPage
            }else{
                if(this.currentPage+3<=this.totalPage.length){
                    result=[this.currentPage,this.currentPage+1,this.currentPage+2,this.currentPage+3]
                }else {
                    result=this.totalPage.slice(-4)
                }
            }
            return result
        },
        isMore(){
            let result =''
            if(this.totalPage.length<=4){
                result = 'none'
            }else{
                if(this.pageList[this.pageList.length-1]<this.totalPage[this.totalPage.length-1]){
                    result=this.pageList[0]>1?'all':'right'
                }else if(this.pageList[this.pageList.length-1]==this.totalPage[this.totalPage.length-1]) {
                    result=this.pageList[0]>1?'left':'none'
                }       
            }
            return result
        }
    },
    methods:{
        currentChange(val){
            this.$emit('currentChange',val)
        },
        prevPage(val){
            if(val===1){
                this.$emit('currentChange',1)
            }else{
                this.currentPage >1 && this.$emit('currentChange',this.currentPage-1)
            }
        },
        nextPage(val){
            if(val===1){
                this.$emit('currentChange',this.totalPage.length)
            }else{
                this.currentPage < this.totalPage.length && this.$emit('currentChange',this.currentPage+1)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.new-pagination{
    width: 100%;
    height: 51px;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: #7F88A3;
    line-height: 12px;
    .left{
        .size{
            margin: 0 6px;
            .val{
                color: #5168AF;
                text-decoration:underline;
                display: inline-block;
                margin: 0 4px;
            }
        }
    }   
    .right{
        .icon-disable{
            cursor: not-allowed;
            color: #869DEC;
        }
        .icon:hover{
            color: #305AED;
        }
        i{
            cursor: pointer;
        }
        .margin-l-10{
            margin-left: 10px;
        }
        .margin-r-10{
            margin-right: 10px;
        }
        .page-list{         
            .box{
                font-family: DINAlternate-Bold;
                font-size: 14px;
                color: #7F88A3;
                letter-spacing: 0;
                line-height: 14px;
                margin-right: 20px;
                cursor: pointer;
                &:first-child{
                    margin-left: 20px;
                }
                &-active{
                    font-family: DINAlternate-Bold;
                    font-size: 14px;
                    color: #896EFF;
                    letter-spacing: 0;
                    text-align: center;
                    line-height: 14px;
                    text-shadow: 0 0 8px #5456E2;
                }
            }
        }
    }
}
</style>

2. 使用：

<NewPagination :currentPage='pageNum' :total="total" :pageSize="pageSize"
                    @currentChange='currentChange'></NewPagination>

最后

以上就是威武紫菜为你收集整理的vue实现简单封装分页组件的全部内容，希望文章能够帮你解决vue实现简单封装分页组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。