80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<template>
|
|
<article>
|
|
<post-teaser v-for="p in posts" :key="p.path" :post="p"></post-teaser>
|
|
|
|
<nav v-if="count > 5">
|
|
<ul>
|
|
<li v-if="page > 1">
|
|
<nuxt-link :to="makePageUrl(1)" aria-label="page 1">1</nuxt-link>
|
|
</li>
|
|
|
|
<li v-if="page > 3">
|
|
<span> … </span>
|
|
</li>
|
|
|
|
<li v-if="page > 2">
|
|
<nuxt-link
|
|
:to="makePageUrl(page - 1)"
|
|
:aria-label="`page ${page - 1}`"
|
|
>
|
|
{{ page - 1 }}
|
|
</nuxt-link>
|
|
</li>
|
|
|
|
<li>
|
|
<span>
|
|
{{ page }}
|
|
</span>
|
|
</li>
|
|
|
|
<li v-if="page < total - 1">
|
|
<nuxt-link
|
|
:to="makePageUrl(page + 1)"
|
|
:aria-label="`page ${page + 1}`"
|
|
>
|
|
{{ page + 1 }}
|
|
</nuxt-link>
|
|
</li>
|
|
|
|
<li v-if="page < total - 2">
|
|
<span> … </span>
|
|
</li>
|
|
|
|
<li v-if="page < total">
|
|
<nuxt-link :to="makePageUrl(total)" :aria-label="`page ${total}`">
|
|
{{ total }}
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</article>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Prop } from 'nuxt-property-decorator'
|
|
|
|
@Component
|
|
export default class PostQuery extends Vue {
|
|
@Prop({ required: true }) posts!: IPostTeaser[]
|
|
@Prop({ required: true }) count!: number
|
|
|
|
get page() {
|
|
return parseInt((this.$route.query.page as string) || '1')
|
|
}
|
|
|
|
get total() {
|
|
return Math.ceil(this.count / 5)
|
|
}
|
|
|
|
makePageUrl(page: number) {
|
|
return this.$router.resolve({
|
|
path: this.$route.path,
|
|
query: {
|
|
...this.$route.query,
|
|
page: page.toString(),
|
|
},
|
|
}).href
|
|
}
|
|
}
|
|
</script>
|