83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
|
|
<div class="pagination" v-if="searchDone">
|
|
<router-link class="previous" v-bind:class="{ 'none-opacity': currentPage === 1 }" :to="{ query: buildPageUrlQuery(currentPage - 1) }">Previous page</router-link>
|
|
|
|
<div class="pages">
|
|
<template v-for="page in pages">
|
|
|
|
<router-link v-if="page !== currentPage" class="go-to-page" :to="{ query: buildPageUrlQuery(page) }" :key="page">
|
|
{{ page }}
|
|
</router-link>
|
|
|
|
<div v-else class="current" :key="page">{{ page }}</div>
|
|
|
|
</template>
|
|
</div>
|
|
|
|
<router-link class="next" v-bind:class="{ 'none-opacity': currentPage >= maxPage }" :to="{ query: buildPageUrlQuery(+currentPage + 1) }">Next page</router-link>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '../scss/_variables';
|
|
|
|
.pagination {
|
|
margin-top: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.pages {
|
|
display: flex;
|
|
|
|
* {
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: #4285f5;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.previous {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.next {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
@media screen and (max-width: $small-view) {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue'
|
|
|
|
export default Vue.extend({
|
|
props: {
|
|
maxPage: Number,
|
|
searchDone: Boolean,
|
|
currentPage: Number,
|
|
pages: Array as () => number[]
|
|
},
|
|
|
|
methods: {
|
|
buildPageUrlQuery (page: number) {
|
|
const query = this.$route.query
|
|
|
|
return Object.assign({}, query, { page })
|
|
},
|
|
}
|
|
})
|
|
</script>
|