Pagination.vue

<template>
	<ul class="sweet-pagination" v-if="pages > 1">
		<li :class="[{hidden: currentPage <= 2}]">
			<a href="#" v-on:click.prevent="onChange(1)" class="prev">‹‹</a>
		</li>

		<li :class="[{hidden: currentPage <= 1}]">
			<a href="#" v-on:click.prevent="onChange('previous')" class="prev">‹</a>
		</li>

		<template v-for="page in getPages()">
			<li>
				<a href="javascript:void(0);" v-on:click.prevent="page != currentPage && onChange(page)" :class="['page', {active: page == currentPage}]">{{ page }}</a>
			</li>
		</template>

		<li :class="[{hidden: currentPage >= pages}]">
			<a href="#" v-on:click.prevent="onChange('next')" class="next">›</a>
		</li>

		<li :class="[{hidden: currentPage >= pages - 1}]">
			<a href="#" v-on:click.prevent="onChange(pages)" class="next">››</a>
		</li>
	</ul>
</template>

<script>
    export default {
		name: 'Pagination',

		props: {
			id: {
				type: String,
				required: false,
				default: 'pagination'
			},

			pages: {
				type: Number,
				required: true,
			},

			currentPage: {
				type: Number,
				required: false,
				default: 1,
			},
		},

		methods: {
			getPages() {
				let additionalPagesToDisplay = 4

				let lowerLower = Math.max(this.currentPage - additionalPagesToDisplay, 1)
				let upperLower = this.currentPage

				let lowerUpper = this.currentPage + 1
				let upperUpper = Math.min(this.pages, this.currentPage + additionalPagesToDisplay)

				let lowerPages = []
				let upperPages = []

				let pages

				for (let i = lowerLower; i <= upperLower; i++) {
					lowerPages.push(i)
				}

				for (let i = lowerUpper; i <= upperUpper; i++) {
					upperPages.push(i)
				}

				if (this.currentPage == this.pages) {
					pages = lowerPages
				} else {
					pages = lowerPages.concat(upperPages)
				}

				return pages
			},

			onChange(page) {
				this.$emit('change', page, this.id)
			}
		},
    }
</script>

<style lang="scss">
	@import '~styles/colors';
	@import '~styles/mixins';

	ul.sweet-pagination {
		@include ulreset;

		border-top: 1px solid color(border);
		text-align: center;

		padding: {
			top: 24px;
			bottom: 24px;
		}

		li {
			display: inline-block;

			a {
				display: block;
				color: color(blue);

				text-decoration: none;
				transition: all 0.2s;

				border-radius: 3px;

				padding: {
					left: 16px;
					right: 16px;
				}

				margin: {
					left: 4px;
					right: 4px;
				}

				height: 36px;
				line-height: 36px;
				min-width: 16px;
				text-align: center;

				font-size: 14px;

				&:hover {
					background: color(blue);
					color: #fff;
				}

				&.active {
					@include unselectable;

					color: color(light-grey);
					background: color(light-background);
				}
			}

			&.prev a, &.next a {
				font-weight: 600;

				&:hover {
					background: color(dark);
				}
			}

			&.hidden {
				visibility: hidden;
			}
		}
	}
</style>