vue-分页组件JS版

• Z时代
• 2024-01-10
• 分类：综合

预览

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

使用方法

<!--分页器-->
<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}

以上是 vue-分页组件JS版 的全部内容， 来源链接： utcz.com/z/377239.html