带点的按钮分页

Question

我正在练习 vue，我正在尝试与 Rick Morty Api https://rickandmortyapi.com/documentation/ 建立分页

目前的样子：

Table

我想以1 2 3 4 5 ... 20 的形式显示这些按钮，如果我点击 20，那么它看起来就像1 ... 15 16 17 18 19 20。我怎样才能做到这一点？我需要为此使用 css 还是纯 js 并使用计算属性？

<div class="button_container">
        <button @click="pageChange(i + 1)" v-for="(item, i) in pages" :key="i">
          {{ i + 1 }}
        </button>
      </div>

Answer 1

单线操作并不是那么简单，我推荐的方法是使用computed

你可以使用https://stackoverflow.com/a/67658442/197546的函数

// define method
function paginate(current_page, last_page, onSides = 3) {
  // pages
  let pages = [];
  // Loop through
  for (let i = 1; i <= last_page; i++) {
    // Define offset
    let offset = (i == 1 || last_page) ? onSides + 1 : onSides;
    // If added
    if (i == 1 || (current_page - offset <= i && current_page + offset >= i) ||
        i == current_page || i == last_page) {
        pages.push(i);
    } else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) {
        pages.push('...');
    }
  }
  return pages;
}

// then in component...
data:{
  return{
    pages:[...],
    currentPage: 0,
  }
},
//...
computed: {
  pageNums = () {
    return paginate(this.currentPage, this.pages.length, 4)
  }
}

那么，因为...不应该有事件监听器，你可以使用<template>和v-if来使用不同的元素

<div class="button_container">
  <template v-for="(pageNum, i) in pages" :key="i">
    <button v-if="Number.isInteger(pageNum)" @click="currentPage = i">
      {{ pageNum }}
    </button>
    <span v-else>
      {{ pageNum }}
    </span>
  </template >
</div>