vue pagination组件

效果

  • 首页 首页
  • 第二页第二页出现上一页按钮
  • 第五页第五页之后与首页之间出现分隔符
  • 最后一页下一页按钮消失

样式由bootstrap提供

组件

Vue.component('pagination',{
    data(){
        return {
            pageCount:0
        };
    },
    props:[
        'total','index','limit'
    ],
    methods:{
        jumpTo:function(val){
            this.index = val;
            this.$emit('jump',val);
        },
    },
    watch:{
        total:function(val) {
            this.pageCount = Math.ceil(this.total/this.limit);
        },
        limit:function(val){
            this.pageCount = Math.ceil(this.total/this.limit);
        }
    },
    template:`
    <ul class="pagination" style="margin-top: 0%;float: right;" v-if="pageCount>0">
        <li class="page-item" v-if="index>0"><span v-on:click="jumpTo(index-1)">&laquo;</span><li>
        <li class="page-item" v-if="index>2"><span v-on:click="jumpTo(0)">1</span><li>
        <li class="page-item" v-if="index>3"><span >…</span><li>
        <li class="page-item" v-if="index>1"><span v-on:click="jumpTo(index-2)">{{index-1}}</span><li>
        <li class="page-item" v-if="index>0"><span v-on:click="jumpTo(index-1)">{{index}}</span><li>
        <li class="page-item active" v-if="index>=0"><span >{{index + 1}}</span><li>
        <li class="page-item" v-if="index < pageCount-1"><span v-on:click="jumpTo(index+1)">{{index + 2}}</span><li>
        <li class="page-item" v-if="index < pageCount-2"><span v-on:click="jumpTo(index+2)">{{index + 3}}</span><li>
        <li class="page-item" v-if="index < pageCount-4"><span >…</span><li>
        <li class="page-item" v-if="index < pageCount-3"><span v-on:click="jumpTo(pageCount-1)">{{pageCount}}</span><li>
        <li class="page-item" v-if="index < pageCount-1"><span v-on:click="jumpTo(index+1)">&raquo;</span><li>
    </ul>
    `
})


usage

html

<pagination :limit="itemLimit" :total="itemCount" :index="currentIndex" v-on:jump="jumpTo"></pagination>

app

methods:{
    jumpTo:function(index){
          this.pageJumpTo(index);  
    },
}

总结

total 参数是记录未分页前的所有item数量。监听 jump 事件可获取组件页面跳转目标页数。

后台处理的页码是0~n,而前端显示是1~n+1,主要是为了后端交互方便。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值