vue-分页组件JS版

预览

 

 

 样式及省略号规则可自行调整

 

使用方法

<!--分页器-->
<div class="organ-res-page" style="text-align: right;" v-if="testCardsNum > pageSize">
　　<navigation :pages="pages" :current.sync="pageNo" :pagetotal="testCardsNum" :pagesize="pageSize" @navpage="pageList"></navigation>
</div>

<script type="text/javascript" src="../js/pagination.js"></script>
<script>
var vm = new Vue({
　　el:"",
　　data:{
　　　　pageNo: 1,
　　　　pages: 1,
　　　　pageSize: 20,
　　　　testCardsNum: 1,
　　},
　　methods:{
　　　　pageList:function(curPage) {
　　　　　　//根据当前页获取数据
　　　　　　cardInfo.pageNo = curPage;
　　　　}
　　}
})
</script>

 

pagination.js

 

/**
 * author:
 * createTime:
 * title: 分页组件
 */
var pageComponent = Vue.extend({
    template: '<nav aria-label="Page navigation">'+
        '<ul class="pagination pagination-sm">'+
        '<li class="page-item" :class="{\'disabled\':pages==pages}">'+
        '<span style="border: none">共 {{pagetotal}} 条记录，每页显示：{{pagesize}}条</span>'+
        '</li>'+
        '<li class="page-item" :class="{\'disabled\':curPage==1}">'+
        '<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+
        '<span aria-hidden="true">上一页</span>'+
        '</a>'+
        '</li>'+
        '<li v-for="page in showPageBtn" class="page-item" :class="{\'active\':page==curPage}">'+
        '<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+
        '<a href="javascript:;" v-else>···</a>'+
        '</li>'+
        '<li class="page-item" :class="{\'disabled\':curPage==pages}">'+
        '<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+
        '<span aria-hidden="true">下一页</span>'+
        '</a>'+
        '</li>'+
        '<li class="page-item">'+
        '<input type="number" class="pull-left" name="curentPage" ' +
        'style="width: 50px;height: 30px;text-align: center;color: #777" maxlength="9" ' +
        'v-model="toPage" :max="pages" min="1">'+
        '<a class="go" style="margin-left: 0;" @click="gotoPage">GO</a>'+
        '</li>'+
        '</ul>'+
        '</nav>',
    // 用户组件传递数据
    props: {
        pages: {
            type: Number,
            default: 1
        },
        current: {
            type: Number,
            default: 1
        },
        pagetotal: {
            type: Number,
            default: 0
        },
        pagesize: {
            type: Number,
            default: 20
        }
    },
    data:function (){
        return{
            curPage:1,
            toPage:1
        }
    },
    computed: {
        // 显示分页按钮
        showPageBtn:function() {
            var pageNum = this.pages; // 总页数
            var index = this.curPage; // 当前页
            var arr = [];
            if (pageNum <= 6) {
                for (var i = 1; i <= pageNum; i++) {
                    arr.push(i)
                }
                return arr
            }
            // 对页码显示进行处理，动态展示
            if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
            if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
            if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
            if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
            return [1, 0, index - 1, index, index + 1, 0, pageNum];
        }
    },
    methods: {
        goPage:function(page) {
            if (page != this.curPage) {
                this.curPage = page;
                this.$emit('navpage', this.curPage);
            }
        },
        gotoPage:function () {
            if (this.toPage > this.pages) {
                this.toPage = this.pages;
            }
            if (this.toPage < 1) {
                this.toPage = 1;
            }
            this.curPage = this.toPage;
            this.$emit('navpage', this.curPage);
        }
    }
});
Vue.component('navigation', pageComponent); // 注册组件

 

css

.organ-res-page{-webkit-user-select: none;user-select: none;-moz-user-select: none;-ms-user-select: none;}
.organ-res-page .page-item a{color: rgba(0,0,0,0.65);}
.organ-res-page .active a{color: #fff;background: #4C80FF}
.organ-res-page .page-item a:hover{background:  #fff;}
.organ-res-page .active a:hover{background: #337ab7}
.organ-res-page .next a:hover{background:  #fff;}
.organ-res-page .prev a:hover{background:  #fff;}
.organ-res-page .prev a{color: rgba(0,0,0,0.65);}
.organ-res-page .next a{color: rgba(0,0,0,0.65);}
.organ-res-page ul li a{margin: 0 3.4px;}
#go-page{margin: 0 5px;background: #FFFFFF;border: 1px solid #D9D9D9;border-radius: 4px;width: 40px;height: 30px;}
.organ-res-page .page-text{float: left;margin: 0 1%;line-height: 30px;font-size: 14px;color: rgba(0,0,0,0.65);}
.organ-res-page .no-active a{color: rgba(0,0,0,0.25);border-color: #D9D9D9}