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>
<div class="pagination flex-center">
<button type="button" :disabled="search.currentPage === search.startPage" @click="$emit('onChange', search.startPage)">
<DoubleLeftOutlined />
</button>
<button type="button" :disabled="!search.existPrevPage" @click="$emit('onChange', (search.currentPage - 1))">
<LeftOutlined />
</button>
<template v-for="idx in search.totalPageCount" :key="idx">
<button type="button" :class="{ 'page-number': true, clicked: search.currentPage === idx }" :disabled="search.currentPage === idx" @click="$emit('onChange', idx)">{{ idx }}</button>
</template>
<button type="button" :disabled="!search.existNextPage" @click="$emit('onChange', (search.currentPage + 1))">
<RightOutlined />
</button>
<button type="button" :disabled="search.currentPage === search.endPage" @click="$emit('onChange', search.endPage)">
<DoubleRightOutlined />
</button>
</div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
export default {
components: {
DoubleLeftOutlined,
LeftOutlined,
RightOutlined,
DoubleRightOutlined,
},
props: {
search: {
type: Object,
default: {},
}
},
methods: {},
}
</script>
<style scoped>
button:disabled {
cursor: not-allowed;
}
</style>