Вот тебе пример на bulma.css <template> <nav class="pagination

Question

Вот тебе пример на bulma.css <template> <nav class="pagination

is-centered is-rounded" role="navigation" aria-label="pagination">
<nuxt-link :to="navigate(-1)" class="pagination-previous" :disabled="currentPage === 1">Previous</nuxt-link>
<nuxt-link :to="navigate(1)" class="pagination-next" :disabled="currentPage === totalPages">Next page</nuxt-link>
<ul class="pagination-list" v-if="totalPages > 1">
<li><nuxt-link :to="{query: firstPage}" class="pagination-link" aria-label="Goto page 1" :class="{'is-current': currentPage === 1}">1</nuxt-link></li>
<li v-if="currentPage > 3"><span class="pagination-ellipsis">…</span></li>
<li v-for="n in totalPages" :key="n">
<nuxt-link
:to="{query: {page: n}}"
:class="{'is-current': currentPage === n}"
v-if="n !== 1 && n !== totalPages && Math.abs(n - currentPage) < 3"
class="pagination-link"
:aria-label="'Goto page ' + n"
>{{ n }}</nuxt-link>
</li>
<li v-if="currentPage < totalPages - 3"><span class="pagination-ellipsis">…</span></li>
<li><nuxt-link :to="{query: {page: totalPages}}" class="pagination-link" :aria-label="'Goto page ' + totalPages" :class="{'is-current': currentPage === totalPages}">{{ totalPages }}</nuxt-link></li>
</ul>
</nav>
</template>

<script>
export default {
props: ['totalPages'],
computed: {
currentPage() { return this.$route.query.page ? parseInt(this.$route.query.page) : 1},
firstPage() {
let query = {...this.$route.query}
delete query.page
return query
}
},
methods: {
navigate(step) {
const path = this.$route.path
const pageNum = (parseInt(this.currentPage) + parseInt(step))
const page = pageNum > 0 ? pageNum : 1
return {path: path, query: {page: page}}
}
}
}
</script>

#nuxt.js #programming #russian #software

0

13.12.2018

1 ответов

23 просмотра

Пользователь 61167 · Accepted Answer

Пользователь 61167

пасиб, сейчас попробую потыкать)

0

13.12.2018

207 похожих чатов

Вот тебе пример на bulma.css <template> <nav class="pagination

1 ответов

Похожие вопросы