手搓分页实现

1.如果总页数小于等于7，没有省略号

2.如果page<=4,没有前省略号

3.如果page后面4页，没有后面省略号

if（total <= 10）{循环所有分页}

if（total>7）{

        if(page >= 1 && page <= 5){[1,2,3,4,5,6,7,8,...,total]}

        else if(page <= total && page >= totalPage - 5)        { // 比如一共17页  从第10开始，循环到17  [10  11  12  13  14  15  16  17]}

        else{// 如果当前是第15页  1...  12 13 14 15 16 17 18...}       

}

<div class="pager">
     <a style="margin: 5px;" :class="{active: page == p}" href="javascript:;" v-for="p in pager" @click="change(p)">{{ p }}</a>
</div>

        var vm = new Vue({
            el: '#app',
            data: {
                playlist: [],
                limit: 20,
                page: 1,
                totalPage: 0,
                pager: [],
            },
            created() {
                this.getList();
            },

            methods: {
                change(val) {
                    console.log(val);
                    if (val !== '...') {
                        this.page = val;
                        this.getList();
                    }
                },
                getList() {
                    var url = `http://localhost:3000/top/playlist?cat=${this.cat}&offset=${(this.page - 1) * this.limit}&limit=${this.limit}`;
                    axios.get(url).then(res => {
                        this.playlist = res.data.playlists;
                        this.totalPage = Math.ceil(res.data.total / this.limit);
                        this.getPages();
                    })
                },
                getPages() {
                    this.pager = [];
                    if (this.totalPage <= 10) { // 总页数小于等于10
                        for (let i = 0; i < this.totalPage; i++) {
                            this.pager.push(i + 1);
                        }
                    } else {  // 总页数大于10
                        if (this.page >= 1 && this.page <= 5) {  // 当前页在前5页
                            for (let i = 0; i < 8; i++) {
                                this.pager.push(i + 1);
                            }
                            this.pager.push('...');
                            this.pager.push(this.totalPage);
                        } else if (this.page <= this.totalPage && this.page >= this.totalPage - 5) { // 当前页在后5页
                            this.pager.push(1);
                            this.pager.push('...');
                            // 比如一共17页  从第10开始，循环到17  [10  11  12  13  14  15  16  17]
                            for (let i = this.totalPage - 7; i <= this.totalPage; i++) {
                                this.pager.push(i);
                            }
                        } else {
                            // 如果当前是第15页  1...  12 13 14 15 16 17 18...
                            this.pager.push(1);
                            this.pager.push('...');

                            for (let i = this.page - 3; i <= this.page + 3; i++) {
                                this.pager.push(i);
                            }

                            this.pager.push('...');
                            this.pager.push(this.totalPage);
                        }
                    }
                    console.log(this.pager);
                }
            }
        })