vue分页器组件，可设置初始当前页

使用vue编写的分页器组件，支持输入页码跳转，效果如果：

**

组件调用：

**

//html调用 参数:pageSize(总页数);pageNo(当前页)
<pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>

//组件引入
import pager from '../../component/pager/pager.vue'

//组件调用声明
components:{ pager}

//参数
data(){
    return {
        pageSize: 30,
        pageNo: 2
    }
}

//接收跳转事件
methods:{
    jump(id){
        console.log(id)
    },
}

**

组件编写

pager.vue：

**

<template>
    <div class="pager-wrapper" ref="pager">
        <div class="pager-box">
            <a class="pager-prev" :class="{'pager-disabled':prevDisable}" href="javascript:;" @click="jumpPrev()">上一页</a>
            <template v-for="i in pageSize">
                <span v-if="i==pageNo" class="pager-curr">
                    <em class="pager-em"></em><em>{{i}}</em>
                </span>
                <a v-else-if="pageNo<5&&(i)<6" href="javascript:;" @click="jump(i)">
                    {{i}}
                </a>
                <a v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2)" href="javascript:;" @click="jump(i)">
                    {{i}}
                </a>
                <template v-else>
                    <span v-if="pageNo<5&&i==6" class="pager-spr">…</span>
                    <span v-if="pageNo==4&&i==7" class="pager-spr">…</span>
                    <span v-if="pageNo>4&&i==pageNo-3" class="pager-spr">…</span>
                    <span v-if="pageNo>4&&i==pageNo+3" class="pager-spr">…</span>
                </template>
            </template>
            <a class="pager-next" :class="{'pager-disabled':nextDisable}" href="javascript:;" @click="jumpNext()">下一页</a>
        </div>
        <div class="pager-input">
            <input type="text" v-model="jumpPage">
            <a class="pager-btn-go" href="javascript:;" @click="Go()">GO</a>
        </div>
    </div>
</template>

<script>
export default {
    model:{ //通过v-model传过来的参数
        prop: 'pageNo',
        event: 'jumpPage'
    },
    props:{
        pageSize:{
            type: Number,
            default: 1
        },
        pageNo:{ //通过v-model传过来的参数
            type: Number,
            default: 1
        }
    },
    data(){
        return {
            jumpPage:'' //避免操作props参数
        }
    },
    computed: {
        prevDisable: function(){ //“上一页”按钮是否可点
            if(this.pageNo > 1){
                return false;
            }else{
                return true
            }
        },
        nextDisable: function(){ //“下一页”按钮是否可点
            if(this.pageNo < this.pageSize && this.pageSize > 1){
                return false;
            }else{
                return true;
            }
        },
    },
    methods: {
        jumpPrev: function(){ //点击上一页
            if(this.pageNo == 1){
                return ;
            }else{
                this.$emit('jumpPage',this.pageNo-1);
                this.$emit('on-jump',this.pageNo-1);
            }
        },
        jumpNext: function(){ //点击下一页
            if(this.pageNo == this.pageSize){
                return ;
            }else{
                this.$emit('jumpPage',this.pageNo+1); //修改当前页码
                this.$emit('on-jump',this.pageNo+1); //跳转
            }
        },
        jump: function(id){ //直接跳转
            if(id>this.pageSize){ 
                id=this.pageSize;
            }
            this.jumpPage = '';
            this.$emit('jumpPage',id); //修改当前页码
            this.$emit('on-jump',id); //跳转
        },
        Go: function(){
            if(this.jumpPage==''){ //判空处理
                return ;
            }else if(/^\d*$/.test(parseInt(this.jumpPage))){ //填写数字才能跳转
                this.jump(parseInt(this.jumpPage));
                this.jumpPage = '';
            }else{
                this.jumpPage = '';
                return ;
            }
        }
    }
}
</script>

转载至：添加链接描述
完整代码可下载：添加链接描述