78 lines
2.4 KiB
Vue
78 lines
2.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
currentPage: Number,
|
|
lastPage: Number,
|
|
total: Number,
|
|
perPage: Number,
|
|
links: Array,
|
|
topScroll: String,
|
|
onPaginate: { type: Function, required: true }
|
|
});
|
|
|
|
const paginateHandler = (page) => {
|
|
console.log(props.topScroll)
|
|
document.getElementById(props.topScroll).scrollIntoView({behavior: "smooth"});
|
|
props.onPaginate(page);
|
|
}
|
|
|
|
const perv = () => {
|
|
if (props.currentPage > 1) {
|
|
// document.getElementById(props.topScroll).scrollIntoView({behavior: "smooth"});
|
|
props.onPaginate(props.currentPage - 1);
|
|
}
|
|
}
|
|
|
|
const next = () => {
|
|
if (props.currentPage < props.lastPage) {
|
|
// document.getElementById(props.topScroll).scrollIntoView({behavior: "smooth"});
|
|
props.onPaginate(props.currentPage + 1);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="pagination" v-if="lastPage > 1">
|
|
<template v-for="(link , index) in links" :key="index">
|
|
<div class="paginate cursor-pointer" v-if="link.label == 'قبلی'">
|
|
<div @click="perv" v-if="link.url">
|
|
<i class="fi fi-rr-angle-small-right flex text-xl"></i>
|
|
</div>
|
|
</div>
|
|
<div class="paginate cursor-pointer" v-else-if="link.label == 'بعدی'">
|
|
<div @click="next" v-if="link.url">
|
|
<i class="fi fi-rr-angle-small-left flex text-xl"></i>
|
|
</div>
|
|
</div>
|
|
<div class="paginate cursor-pointer flex items-center" :class="{'!text-white !bg-client-primary' : currentPage == link.label }" v-else>
|
|
<div @click="paginateHandler(link.label)" v-if="link.url" :href="link.url" class="flex pt-1">{{link.label}}</div>
|
|
<div v-else href="" class="flex">{{link.label}}</div>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="postcss">
|
|
section.pagination{
|
|
padding: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
section.pagination div.paginate:first-child div{
|
|
border-top-right-radius: .4rem;
|
|
border-bottom-right-radius: .4rem;
|
|
}
|
|
section.pagination div.paginate:last-child div{
|
|
border-top-left-radius: .4rem;
|
|
border-bottom-left-radius: .4rem;
|
|
}
|
|
section.pagination div.paginate div{
|
|
display: flex;
|
|
height: 2.2rem;
|
|
width: 2.2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #e6e6e6;
|
|
@apply text-client-Fontcolor
|
|
}
|
|
</style>
|