File name
Commit message
Commit date
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 lang="html">
<div :class="{ 'component-pagination notranslate': true, [className]: className }" id="pagination"
v-show="pagination.totalPageCount > 0" >
<div class="pagination-button-type">
<!-- <a class="first-page" @click="excute(1)" title="첫 번째 페이지로 이동" v-show="pagination.existPrevPage"></a> -->
<a class="first-page" @click="excute(1)" title="첫 번째 페이지로 이동" ></a>
<!-- <a class="prev" @click="excute(currentPage - 1)" title="이전 페이지로 이동" v-show="currentPage != 1"></a> -->
<a class="prev" @click="excute(currentPage - 1)" title="이전 페이지로 이동"></a>
<a @click="excute(i)" v-for="i in createRange" :class="{ active: currentPage == i }">
{{ i }}
</a>
<!-- <a class="next" @click="excute(currentPage + 1)" title="다음 페이지로 이동"
v-show="currentPage != pagination.totalPageCount"></a> -->
<a class="next" @click="excute(currentPage + 1)" title="다음 페이지로 이동"></a>
<!-- <a class="end-page" @click="excute(pagination.totalPageCount)" title="마지막 페이지로 이동"
v-show="pagination.existNextPage"></a> -->
<a class="end-page" @click="excute(pagination.totalPageCount)" title="마지막 페이지로 이동"></a>
</div>
</div>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
default: 0,
},
pagination: Object,
click: Function,
className: {
type: String,
default: '',
},
},
emits: ["update:currentPage"],
data: function () {
return {};
},
methods: {
excute: function (i) {
if (i > 0 && i <= this.pagination.totalPageCount) {
if (i != this.currentPage) {
this.$emit("update:currentPage", i); //부모 currentPage에 선택한 page번호 할당
this.click(i); //부모 function 실행
} else {
return;
}
} else {
alert("이동할 페이지가 없습니다.");
}
},
},
computed: {
createRange: function () {
var range = [];
for (
var i = this.pagination.startPage;
i <= this.pagination.endPage;
i++
) {
range.push(i);
}
if (range.length == 0) {
range.push(1);
}
return range;
},
},
watch: {},
//beforeCreate: function () {},
//created: function () {},
//beforeUpdate: function () {},
//updated: function () {},
mounted: function () { },
};
</script>