Vue分页 - 如何隐藏多余页面

Question

我的Vue应用程序中有一个分页组件。我自己编写了分页的逻辑，并没有使用任何类型的插件。分页工作正常，但是目前它正在为每个页面添加一个按钮。因此，当返回大量结果时，最终会出现太多按钮。我想将其切换为以下格式：

上一页1 2 3 ... 7下一页

在Vue中解决此问题的最佳方法是什么？这是我到目前为止所做的：

HTML

    <li class="pagination-more pull-left" :class="{ disabled: activePage === 1 }">
        <a :disabled="activePage === 1"  @click="changePage(activePage - 1)">&laquo; Prev</a> 
    </li>                                 
    <li v-for="i in totalPages" :class="{ active: activePage === i }"> 
        <a @click="changePage(i)">{{i}}</a> 
    </li>                                                                 
    <!-- <li class="dots">&hellip;</li>                                 -->
    <li class="pagination-more pull-right" :class="{ disabled: activePage === totalPages }">
        <a :disabled="activePage === totalPages" @click="changePage(activePage + 1)">Next &raquo;</a> 
    </li>

VUE

    props: ['searchResults'],
    data: function() {
      return {
        activePage: 1
      }
    },
    methods: {
      changePage: function(next) {
        if (next < 1 || next > this.totalPages) {
          return;
        }
        this.activePage = next;
      }
    },
    computed: {
      searchMethod() { return this.$store.state.searchMethod },
      totalPages() { return Math.ceil(this.searchResults.length / 20) },
      paginatedResults() { return getPaginatedResults(this.searchResults, this.activePage) }
    }