javascript - 如何限制Vue中的分页按钮？

Question

我有一个分页组件，它接收 totalPages 和 currentPage 属性，然后呈现更改 currentPage 的按钮。问题是现在如果我有很多产品，我会呈现太多按钮，我想将按钮数量限制为 5 个 - 前两个页面、当前页面和后两个页面。

因此，如果我的当前页面是 4，我会看到页面 2、3、4、5、6 的按钮，并且当前页面始终位于中间按钮(除非不可能)。不过，我不太确定如何处理这个问题，尤其是当 currentPage 是第一个/第二个或倒数第二个/最后一个时的极端情况。

<template lang="html">
    <div class="pagination">
        <div v-for="page in totalPages">
            <div class="page" :class="{ active: page == currentPage}"  @click="setCurrentPage(page)">{{ page }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["totalPages", "currentPage"],
    methods: {
        setCurrentPage(page){
            this.$emit("setCurrentPage", page);
        }
    }
}
</script>

Answer 1

对于在极端情况下也显示完整集的分页，请使用以下算法。这个想法是计算适当的起始索引，然后根据它生成一个数组:

computed: {
  pages() {
    let numShown = 5;   // This sets the number of page tabs
    numShown = Math.min(numShown, this.totalPages);
    let first = this.currentPage - Math.floor(numShown / 2);
    first = Math.max(first, 1);
    first = Math.min(first, this.totalPages - numShown + 1);
    return [...Array(numShown)].map((k,i) => i + first);
  }
}

这是一个演示(我更改了一些变量名):

Vue.component('child', {
  props: ["total", "current"],
  template: `
  <div class="pagination">
    <template v-for="page in pages">
      <div
        :class="{ active: page == current }" class="page no-select"
        @click="setCurrent(page)"
      >
        {{ page }}
      </div>
    </template>
  </div>
  `,
  data: () => ({
    numShown: 5
  }),
  computed: {
    pages() {
      const numShown = Math.min(this.numShown, this.total);
      let first = this.current - Math.floor(numShown / 2);
      first = Math.max(first, 1);
      first = Math.min(first, this.total - numShown + 1);
      return [...Array(numShown)].map((k,i) => i + first);
    }
  },
  methods: {
    setCurrent(page){
      this.$emit("set", page);
    }
  }
})

new Vue({
  el: "#app",
  data: () => ({
    total: 8,
    current: 1
  })
});

.page {
  display: inline-block;
  background: #dddddd;
  padding: 6px 16px;
  cursor: pointer;
  font-family: 'Helvetica';
  font-size: 13pt;
}
.active {
  background: #ddeeff;
  font-weight: bold;
}
.no-select {
  user-select: none;
  -o-user-select:none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

<div id="app">
  <child :total="total" :current="current" @set="current = $event"></child>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>