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

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

1、点击前五页：

2、点击中间部分页面

3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效

组件调用：

//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()">GOa>
        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>

完整代码可下载：https://download.csdn.net/download/web_xiaolei/10554661