126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<template>
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination pagination-rounded justify-content-center">
|
|
<!-- 첫 페이지 이동 -->
|
|
<li
|
|
class="page-item first"
|
|
@click="emitPageChange(navigateFirstPage)"
|
|
:class="{ disabled: isFirstPage }"
|
|
>
|
|
<a class="page-link" href="javascript:void(0);">
|
|
<i class="tf-icon bx bx-chevrons-left bx-sm"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 이전 페이지 이동 -->
|
|
<li
|
|
class="page-item prev"
|
|
@click="emitPageChange(prePage)"
|
|
:class="{ disabled: !hasPreviousPage }"
|
|
>
|
|
<a class="page-link" href="javascript:void(0);">
|
|
<i class="tf-icon bx bx-chevron-left bx-sm"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 페이지 번호들 -->
|
|
<li
|
|
v-for="page in navigatepageNums"
|
|
:key="page"
|
|
:class="['page-item', { active: page === currentPage }]"
|
|
@click="emitPageChange(page)"
|
|
>
|
|
<a class="page-link" href="javascript:void(0);">{{ page }}</a>
|
|
</li>
|
|
|
|
<!-- 다음 페이지 이동 -->
|
|
<li
|
|
class="page-item next"
|
|
@click="emitPageChange(nextPage)"
|
|
:class="{ disabled: !hasNextPage }"
|
|
>
|
|
<a class="page-link" href="javascript:void(0);">
|
|
<i class="tf-icon bx bx-chevron-right bx-sm"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 마지막 페이지 이동 -->
|
|
<li
|
|
class="page-item last"
|
|
@click="emitPageChange(navigateLastPage)"
|
|
:class="{ disabled: isLastPage }"
|
|
>
|
|
<a class="page-link" href="javascript:void(0);">
|
|
<i class="tf-icon bx bx-chevrons-right bx-sm"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
|
|
// Props 정의
|
|
const props = defineProps({
|
|
currentPage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
pages: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
prePage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
nextPage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
isFirstPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isLastPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
hasPreviousPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
hasNextPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
navigatePages: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
navigatepageNums: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
navigateFirstPage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
navigateLastPage: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// 이벤트 정의
|
|
const emit = defineEmits(['update:currentPage']);
|
|
|
|
// 페이지 변경 메서드
|
|
const emitPageChange = (page) => {
|
|
if (page !== props.currentPage && page >= 1 && page <= props.pages) {
|
|
emit('update:currentPage', page);
|
|
}
|
|
};
|
|
</script> |