@kmv-dev

Как выводить в vue пагинации по 3-4 номера страниц и последнюю страницу?

Сделал компонент, сейчас выводятся все номера страниц. Как сделать чтобы отображались при переключении всегда 3-4 номера страниц в зависимости от текущей и ... последняя страница? типа < 1 2 3 4 ... 27 >
сейчас < 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 >
<template>
  <div class="base-pagination">
    <div
      class="base-pagination__btn"
      :class="{'base-pagination__btn_disabled' : currentPage === 1 }"
      @click="togglePrev()"
    >
      <span class="base-pagination__icon icon-Arrow-left1" />
    </div>
    <div class="base-pagination__items">
      <div
        v-for="(item, i) of totalPages"
        :key="`base-pagination__item_${i}`"
        class="base-pagination__item"
        :class="{'base-pagination__item_active' : currentPage === i + 1}"
        @click="toggleCurrentPage(i)"
      >
        <span>{{ ++i }}</span>
      </div>
    </div>
    <div
      class="base-pagination__btn"
      @click="toggleNext()"
    >
      <span class="base-pagination__icon icon-Arrow-right1" />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    currentPage: 1,
    totalPages: 27,
  }),
  methods: {
    toggleCurrentPage(i) {
      this.currentPage = i;
    },
    toggleNext() {
      if (this.currentPage <= this.totalPages - 1) {
        this.currentPage += 1;
      }
    },
    togglePrev() {
      if (this.currentPage > 1) {
        this.currentPage -= 1;
      }
    },
  },
};
</script>
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы