Vue.jsにおけるページネーションの作成

はじめに

今回はLaravelとVueなどを勉強する際にとても参考にさせて頂いたこちらのサイトhttps://www.hypertextcandy.com/tags/vuejs の「Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう」でページネーションをvueで作成されてますが、このサイトで使用しているページネーションはpreviousとnextで構成されているものです。

自分がpreviousとnextとページ数も欲しいと思ったので、作成しました!
完成図は上記の通りです。

タグの構成やデザインはlaravelの標準にあるものを再現して作成しました!

Pagination.vue

<template>
  <div class="links">
    <ul class="pagination">
      <!-- Previous Page Link -->
      <li class="page-item disabled" v-if="isFirstPage">
        <span class="page-link">&lsaquo;</span>
      </li>

      <li class="page-item" v-if="!isFirstPage">
        <RouterLink :to="`?page=${currentPage - 1}`" class="page-link">&lsaquo;</RouterLink>
      </li>

      <!-- Pagination Elements -->
      <li
        class="page-item"
        :class="{active: currentPage == page}"
        v-for="page in displayList"
        :key="page"
      >
        <router-link class="page-link" :to="`?page=${page}`" v-if="currentPage != page">{{page}}</router-link>
        <span class="page-link" v-if="currentPage == page">
          {{
          page }}
        </span>
      </li>

      <!-- Next Page Link -->
      <li class="page-item" v-if="!isLastPage">
        <RouterLink :to="`?page=${currentPage + 1}`" class="page-link">&rsaquo;</RouterLink>
      </li>

      <li class="page-item disabled" v-if="isLastPage">
        <span class="page-link">&rsaquo;</span>
      </li>

      <!-- <RouterLink v-if="! isFirstPage" :to="`?page=${currentPage - 1}`" class="button">&laquo; prev</RouterLink>
      <RouterLink v-if="! isLastPage" :to="`?page=${currentPage + 1}`" class="button">next &raquo;</RouterLink>-->
    </ul>
  </div>
</template>

Pagination.vue

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    lastPage: {
      type: Number,
      required: true
    }
  },
  data() {
    return {};
  },
  computed: {
    isFirstPage() {
      return this.currentPage === 1;
    },
    isLastPage() {
      return this.currentPage === this.lastPage;
    },
    displayList() {
//4は選択しているページの前後のページリスト表示数です。
      let first = this.currentPage - 4;
      if (first < 1) first = 1;

      let last = this.currentPage + 4;
      if (last > this.lastPage) last = this.lastPage;

      const list = [];
      for (let i = first; i <= last; i++) {
        list.push(i);
      }
      return list;
    }
  }
};
</script>

for文を使ってるところはもっと綺麗に書きたかった。

pagination.scss

.links {
    display: flex;
    justify-content: center;

    .pagination {
        list-style-type: none;
        display: flex;
        padding: 0;

        .page-item {
            width: 33px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #dee2e6;
            background-color: #fff;

            &:first-child {
                width: 30px;
                border-radius: 5px 0 0 5px;
            }

            &:last-child {
                width: 30px;
                border-radius: 0 5px 5px 0;
            }

            .page-link {
                text-decoration: none;
                padding: 5.5px 11px;
                color: rgba(29, 161, 242, 1);
            }
        }

        .disabled {
            .page-link {
                color: #6c757d;
            }
        }

        .active {
            background-color: rgba(29, 161, 242, 1);

            .page-link {
                color: #dee2e6;
            }
        }
    }
}

pagination.css

.links {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

.links .pagination {
  list-style-type: none;
  display: -webkit-box;
  display: flex;
  padding: 0;
}

.links .pagination .page-item {
  width: 33px;
  height: 35px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  border: 1px solid #dee2e6;
  background-color: #fff;
}

.links .pagination .page-item:first-child {
  width: 30px;
  border-radius: 5px 0 0 5px;
}

.links .pagination .page-item:last-child {
  width: 30px;
  border-radius: 0 5px 5px 0;
}

.links .pagination .page-item .page-link {
  text-decoration: none;
  padding: 5.5px 11px;
  color: #1da1f2;
}

.links .pagination .disabled .page-link {
  color: #6c757d;
}

.links .pagination .active {
  background-color: #1da1f2;
}

.links .pagination .active .page-link {
  color: #dee2e6;
}

適宜変更して下さい〜

引用 https://www.hypertextcandy.com/tags/vuejs

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう