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)