vue 简单分页

谁借莪１个温暖的怀抱￠ 2022-05-24 08:00 194阅读 0赞

vue 简单分页

样式：

.page-bar {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: right;
    }
    
    .page-button-disabled {
        color:#ddd !important;
    }
    
    .page-bar li {
        list-style: none;
        display: inline-block;
    }
    
    .page-bar li:first-child > a {
        margin-left: 0px;
    }
    
    .page-bar a {
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        cursor: pointer;
    }
    
    .page-bar a:hover {
        background-color: #eee;
    }
    
    .page-bar .active a {
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    
    .page-bar i {
        font-style: normal;
        color: #d44950;
        margin: 0px 4px;
        font-size: 12px;
    }

vue-nav.js的代码

/**
     * pageNum 注意大小写。
     */
    (function(){
        var tm = '<div >'+
        	'<div class="page-bar"  v-if="pages">'+
            '<ul>'+
            '<li v-if="pagenum!=1"><a @click="btnClick(pagenum-1)">上一页</a></li>'+
            '<li v-for="index in indexs" v-bind:class="{ active: pagenum == index}" v-bind:data-id="index">'+
            '<a v-on:click="btnClick(index)">{
       { index }}</a>'+
            '</li>'+
            '<li v-if="pagenum!=pages"><a @click="btnClick(pagenum+1)">下一页</a></li>'+
            '<li><a>共<i>{
       {pages}}</i>页</a></li>'+
            '</ul>'+
            '</div>'+
            '<div style="text-align: center;font-size: 20px;" v-if="pages==0">无记录</div>'+
            '</div>';
    
        var navBar = Vue.extend({
            template: tm,
            props: {
            	pagenum: {
                    type: [String, Number],
                    required: true
                },
                pages: {
                    type: [String, Number],
                    required: true
                },
                callback: {
                   default: function() {
                        return function callback() {
                            // todo
                        }
                    }
                }
            },
            computed: {
                indexs: function() {
                    var left = 1;
                    var right = this.pages;
                    var ar = [];
                    if (this.pages >= 11) {
                        if (this.pagenum > 5 && this.pagenum < this.pages - 4) {
                            left = this.pagenum - 5;
                            right = this.pagenum + 4
                        } else {
                            if (this.pagenum <= 5) {
                                left = 1;
                                right = 10
                            } else {
                                right = this.pages;
                                left = this.pages -9
                            }
                        }
                    }
                    while (left <= right) {
                        ar.push(left);
                        left ++
                    }
                    return ar
                }
            },
            methods: {
                btnClick:function(page) {
                    if (page != this.pagenum) {
                        this.callback(page)
                    }
                }
            }
        })
    
        window.vuePage = navBar
    
    })();

在页面中引入vue-nav.js文件

页面中的代码如下，在表格table下引入此模块

<vue-page :pageNum="pageNum" :pages="pages" :callback="callback"></vue-page>

然后在脚本上写：

完成！

效果如下：

![20180523164325591][]

[20180523164325591]: /images/20220524/5e72f1760bd24ccbbf1e5b53fc1724d2.png