File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="pagination">
<ul>
<li class="arrow" :class="{ disabled: currentPage <= 1 }" @click="changePage(currentPage - 1)"><</li>
<li v-for="pageNum in displayedPageNumbers" :key="pageNum">
<span :class="{ active: currentPage === pageNum, disabled: currentPage === pageNum }" @click="changePage(pageNum)">{{ pageNum }}</span>
</li>
<li class="arrow" :class="{ disabled: currentPage >= totalPages }" @click="changePage(currentPage + 1)">></li>
</ul>
</div>
</template>
<script>
export default {
props: {
search: {
type: Object,
required: true,
default: () => ({}),
}
},
computed: {
// 현재 페이지
currentPage() {
return this.search.currentPage;
},
// 총 페이지 수
totalPages() {
return this.search.totalPageCount > 0 ? this.search.totalPageCount : 1;
},
// 표시할 페이지 번호 목록
displayedPageNumbers() {
const currentPage = this.currentPage;
const totalPages = this.totalPages;
const visiblePages = this.search.pageSize > 0 ? this.search.pageSize : 10;
// 표시할 페이지 범위 계산
let startPageNum = Math.max(1, currentPage - Math.floor(visiblePages / 2));
let endPageNum = Math.min(totalPages, startPageNum + visiblePages - 1);
// endPage가 최대 페이지 수보다 작을 경우, startPage를 조정
if (endPageNum - startPageNum + 1 < visiblePages) {
startPageNum = Math.max(1, endPageNum - visiblePages + 1);
}
// 페이지 번호 배열 생성
const pageNumbers = [];
for (let i = startPageNum; i <= endPageNum; i++) {
pageNumbers.push(i);
}
return pageNumbers;
}
},
methods: {
// 페이지 변경 처리
changePage(pageNum) {
if (pageNum < 1) pageNum = 1;
if (pageNum > this.totalPages) pageNum = this.totalPages;
if (pageNum !== this.currentPage) {
this.$emit('onChange', pageNum);
}
}
}
};
</script>