Skip to content
Snippets Groups Projects
Verified Commit 2e71ddbf authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Pagination now support a compact mode

parent 9b4d7165
No related branches found
No related tags found
No related merge requests found
<template> <template>
<div class="ui pagination borderless menu"> <div class="ui pagination menu">
<a <div
v-if="current - 1 >= 1" :disabled="current - 1 < 1"
@click="selectPage(current - 1)" @click="selectPage(current - 1)"
:class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></a> :class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></div>
<template> <template v-if="!compact">
<a <div
v-if="page !== 'skip'" v-if="page !== 'skip'"
v-for="page in pages" v-for="page in pages"
@click="selectPage(page)" @click="selectPage(page)"
:class="[{'active': page === current}, 'item']"> :class="[{'active': page === current}, 'item']">
{{ page }} {{ page }}
</a> </div>
<a v-else class="disabled item"> <div v-else class="disabled item">
... ...
</a> </div>
</template> </template>
<a <div
v-if="current + 1 <= maxPage" :disabled="current + 1 > maxPage"
@click="selectPage(current + 1)" @click="selectPage(current + 1)"
:class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></a> :class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></div>
</div> </div>
</template> </template>
...@@ -30,7 +30,8 @@ export default { ...@@ -30,7 +30,8 @@ export default {
props: { props: {
current: {type: Number, default: 1}, current: {type: Number, default: 1},
paginateBy: {type: Number, default: 25}, paginateBy: {type: Number, default: 25},
total: {type: Number} total: {type: Number},
compact: {type: Boolean, default: false}
}, },
computed: { computed: {
pages: function () { pages: function () {
...@@ -72,6 +73,9 @@ export default { ...@@ -72,6 +73,9 @@ export default {
}, },
methods: { methods: {
selectPage: function (page) { selectPage: function (page) {
if (page > this.maxPage || page < 1) {
return
}
if (this.current !== page) { if (this.current !== page) {
this.$emit('page-changed', page) this.$emit('page-changed', page)
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment