Después de una gran búsqueda e instalación de 3 paginadores para usar en una nueva página basada en Astro + Vuejs decidí construir uno propio utilizarlo en este y otros proyectos.
Este es el código comentado de todo el paginador y luego mostraré como utilizarlo asociado a una API.
El sitio está basado en astro 2.0 vuejs3 y bootstrap 5.
Contenido del archivo Paginate.vue
<script lang="ts" allow="js" setup>
import { computed, watch } from 'vue'
import { number } from 'zod';
const props = defineProps({
page: Number,
pagetotal: Number,
pageCount: Number,
})
const emit = defineEmits(['changepageparent'])
watch(() => props.pageCount, (newValue, oldValue) => {
if (oldValue != 0) {
calcpages(props.page)
}
});
const calcpages = (jpage) => {
if (jpage == props.pageCount)
pages = range(3, props.pageCount - 2)
else if (jpage >= pages[2]) {
pages = range(3, jpage + 1)
} else if (jpage <= pages[0] && jpage > 1)
pages = range(3, jpage - 1)
else if (jpage == 1)
pages = range(3, jpage)
}
const jumppage = (jpage) => {
if (jpage > 0 && jpage <= props.pageCount)
emit('changepageparent', jpage)
calcpages(jpage)
}
let pages = [1, 2, 3]
const range = (size, startAt = 0) => {
return [...Array(size).keys()].map(i => i + startAt);
}
</script>
<template>
<nav aria-label="Paginacion">
<ul class="pagination">
<li class="page-item" v-show="page != 1">
<a class="page-link" href="" @click.stop.prevent="jumppage(1)" aria-label="Inicio">
<span aria-hidden="true">««</span>
</a>
</li>
<li class="page-item" v-show="page == 1">
<a class="page-link" href="">
<span aria-hidden="true">««</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" @click.stop.prevent="jumppage(page - 1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item" v-show="pages[0]>1">
<a class="page-link" aria-label="">
<span aria-hidden="true">...</span>
</a>
</li>
<li v-for="(npage, index) in pages" class="page-item"><a
:class="'page-link' + ((page == npage) ? ' selecto' : '')" @click.stop.prevent="jumppage(npage)"
href="#">{{ npage }} </a> </li>
<li class="page-item" v-show="pages[2]<pageCount">
<a class="page-link" aria-label="">
<span aria-hidden="true">...</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" @click.stop.prevent="jumppage(page + 1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li class="page-item" v-if="pageCount != page">
<a class="page-link" href="#" @click.stop.prevent="jumppage(pageCount)" aria-label="Inicio">
<span aria-hidden="true">»»</span>
</a>
</li>
<li class="page-item" v-if="pageCount == page">
<a class="page-link">
<span aria-hidden="true">»»</span>
</a>
</li>
</ul>
</nav>
</template>
<style >
.selecto {
color: rgb(191, 60, 60)
}
</style>
Para utilizarlo primero se importa y luego podemos incorporarlo en el componente padre de vuejs.
<Paginador ref="paginadortop" :page="page" :page-count="pagecount" @changepageparent="(page) => changepage(page)" />
Ahora solo tenemos que asegurarnos que existan las variables "page" (pagina actual) , pagecount (el total de páginas a mostrar) y el método que se llama desde el componente padre (changepage)
Top comments (0)