代码之家 › 专栏 › 技术社区 › Onyx

我制作了一个分页组件,它接收totalPages和currentPage道具。如何将按钮数限制为5个?

vuejs2 vue.js javascript

Onyx · 技术社区 · 4 年前

totalPages 和 currentPage 道具,然后渲染更改 . 现在的问题是,如果我有很多产品,我会呈现太多的按钮,我想限制按钮数量为5个-前两页,当前页和下两页。如果我的当前页面是 4 ,我会看到页面的按钮 2, 3, 4, 5, 6 并且让当前页面始终是中间按钮(除非这是不可能的)。我不太清楚该怎么处理,尤其是在 当前页

<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>

1 回复 | 直到 4 年前

Ashwin Bande 4 年前

生成计算属性,如下所示:

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

<script>
export default {
  props: ["totalPages", "currentPage"],
  computed: {
    displayPages() {
      return [-2, -1, 0, 1, 2].map(num => num + this.currentPage).filter(num => num <= totalPages && num > 0);
      // produces array of 5 or less
      // currentPage = 1 -> return [1, 2]
      // current page = 8(last) -> [6, 7, 8]
    },
  },
  methods: {
    setCurrentPage(page){
      this.$emit("setCurrentPage", page);
    }
  }
}
</script>

它应该限制按钮和可伸缩性;只需将数组更改为可伸缩性。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前