用vue做一个分页组件的思路有什么好的思路吗？

其实组件的分页的问题和用什么框架没有关系，分页组件的需求如同，目前开发到一半，觉得目前的方式逻辑有点复杂，想请教大牛们有什么好的思路没？？
目前我的思路是该组件除去上一页和下一页是中间是固定七个按钮，点击第四或者第五个按钮，重新push数据渲染，但是这样的话感觉分的情况太多了

---

正好这几天写了一个，分享一下，prop接收三个参数：当前第几页，总共多少个，每页多少个。对外暴露一个切换页面的事件。

Vue.component('paging', {
    template: '#ComPaging',
    props: ['now', 'total', 'each'],    // 当前第几页, 总共多少个数据, 每页显示多少个
    data: function() {
        return {
            turnTo: this.now
        }
    },
    computed: {
        // 计算总共有多少页
        page_all: function() {
            return Math.ceil(this.total / this.each);
        }
    },
    methods: {
        // 直接跳到第几页
        turnPage: function(page) {
            page = parseInt(page);
            if (page >= 1 && page <= this.page_all) {
                this.changePage(page);
            } else {
                this.changePage(1);
            }
        },
        // 切换页码
        changePage: function(page) {
            if (this.now != page) {
                this.now = page;
                this.turnTo = page;
                this.$dispatch('paging-change');
            }
        },
        changeEach: function() {
            this.now = 1;
            this.$dispatch('paging-change');
        },
        prev: function() {
            if (this.now > 1) {
                this.changePage(this.now - 1);
            }
        },
        next: function() {
            if (this.now < this.page_all) {
                this.changePage(this.now + 1);
            }
        }
    }
});

<template id="ComPaging">    
    <div class="ComPaging noselect clear">
        每页显示
        <select v-model="each" @change="changeEach()">
            <option value="10">10条</option>
            <option value="20">20条</option>
            <option value="30">30条</option>
        </select>
        
        <div class="page_flip">
            <span @click="prev()">&lt;</span>
            <span v-if="page_all < 11" v-for="item in page_all" :class="{on: now == (item+1)}" @click="changePage(item+1)">{{ item + 1 }}</span>
    
            <template v-if="page_all >= 11">
                <span :class="{on: now == 1}" @click="changePage(1)">1</span>
                <span v-if="now - 3 > 1">…</span>
    
                <span v-if="now - 2 > 1" @click="changePage(now - 2)">{{ now - 2 }}</span>
                <span v-if="now - 1 > 1" @click="changePage(now - 1)">{{ now - 1 }}</span>
                <span class="on" v-if="now != 1 && now != page_all">{{ now }}</span>
                <span v-if="now + 1 < page_all" @click="changePage(now + 1)">{{ now + 1 }}</span>
                <span v-if="now + 2 < page_all" @click="changePage(now + 2)">{{ now + 2 }}</span>
    
                <span v-if="now + 3 < page_all">…</span>
                <span :class="{on: now == page_all}" @click="changePage(page_all)">{{ page_all }}</span>
            </template>
            <span @click="next()">&gt;</span>
        </div>
        
        <input type="text" placeholder="跳转到第几页" v-model="turnTo" @keyup.enter="turnPage(turnTo)" style="display: none;">
    </div>
</template>