基於css,Vue的分頁樣式組件

1.css

.page {
    font-weight: 900;
    width: 100%;
    height: 40px;
    text-align: center;
    color: #888;
    margin: 20px auto 0;
    background: #f2f2f2;
    line-height: 40px;
}

.pagelist {
    font-size: 0;
    background: #fff;
    height: 50px;
    line-height: 50px;
}

.pagelist span {
    font-size: 14px;
}

.pagelist .jump {
    border: 1px solid #ccc;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
}

.pagelist .bgprimary {
    cursor: default;
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
}

.jumpinp input {
    width: 55px;
    height: 26px;
    font-size: 13px;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
}

.ellipsis {
    padding: 0px 8px;
}

.jumppoint {
    margin-left: 30px;
}

.pagelist .gobtn {}

.bgprimary {
    cursor: default;
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
}

2.html

<div id="app">
                <div class="page" v-show="show">
                    <div class="pagelist">
                        <span class="jump" v-show="current>1" @click="current--">上一頁</span>
                        <span v-show="current>5" class="jump" @click="jumpPage(1)">1</span>
                        <span class="ellipsis" v-show="efont">...</span>
                        <span class="jump" v-for="num in indexs" :class="{bgprimary:current==num}"
                              @click="jumpPage(num)">{{num}}</span>
                        <span class="ellipsis" v-show="efont&&current<total-4">...</span>

                        <span class="jump" @click="current++">下一頁</span>
                        <span v-show="current<total-1" class="jump" class="jump"
                              @click="jumpPage(total)">{{total}}</span>

                        <span class="jumppoint">跳轉到：</span>
                        <span class="jumpinp"><input type="text" v-model="changeCurrent"></span>
                        <span class="jump gobtn" @click="jumpPage(changeCurrent)">GO</span>
                    </div>
                </div>
 </div>

3.Vue

<script>
    new Vue({
        el: '#app',
        data: {
            current: 1, 
            size: 10,
            total: 10,
            changeCurrent: ''
        },
       
        methods: {
            jumpPage: function (id) {
                this.current = id;
            }
        },
        computed: {
            show: function () {
                return this.total && this.total != 1
            },
            efont: function () {
                if (this.total <= 7) return false;
                return this.current > 5
            },
            indexs: function () {

                var left = 1,
                    right = this.total,
                    ar = [];
                if (this.total >= 7) {
                    if (this.current > 5 && this.current < this.total - 4) {
                        left = Number(this.current) - 3;
                        right = Number(this.current) + 3;
                    } else {
                        if (this.current <= 5) {
                            left = 1;
                            right = 7;
                        } else {
                            right = this.total;

                            left = this.total - 6;
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left);
                    left++;
                }
                return ar;
            },
        }
    })
</script>

4.效果圖

原文:https://www.cnblogs.com/sebastian-tyd/p/7853109.html