mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-28 07:00:24 +08:00
57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<div v-if="pages.length > 1" class="flex gap-3 select-none">
|
|
<div class="w-9 h-9">
|
|
<div class="w-9 h-9 cursor-pointer flex items-center justify-center" data-e2e="e2e-BT-tableInfo-left"
|
|
@click="$emit('setPage', currentPage - 1)"
|
|
v-if="currentPage > 1">
|
|
<i class="sn-icon sn-icon-left cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
<div class="w-9 h-9 cursor-pointer flex items-center justify-center"
|
|
v-for="page in pages"
|
|
:class="{ 'border-solid rounded border-sn-science-blue': page === currentPage }"
|
|
:key="page"
|
|
:data-e2e="`e2e-BT-tableInfo-page-${page}`"
|
|
@click="$emit('setPage', page)">
|
|
<span >{{ page }}</span>
|
|
</div>
|
|
<div class="w-9 h-9">
|
|
<div class="w-9 h-9 cursor-pointer flex items-center justify-center" data-e2e="e2e-BT-tableInfo-right"
|
|
@click="$emit('setPage', currentPage + 1)"
|
|
v-if="totalPage > currentPage">
|
|
<i class="sn-icon sn-icon-right cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Pagination',
|
|
props: {
|
|
totalPage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
currentPage: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
pages() {
|
|
const pages = [];
|
|
for (let i = 1; i <= this.totalPage; i += 1) {
|
|
if (i >= this.currentPage - 2 || this.totalPage <= 5) {
|
|
pages.push(i);
|
|
}
|
|
|
|
if (pages.length === 5) {
|
|
break;
|
|
}
|
|
}
|
|
return pages;
|
|
}
|
|
}
|
|
};
|
|
</script>
|