Componente Paginador para Vuejs 3
Horacio Degiorgi
Posted on February 10, 2023
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)
Posted on February 10, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related