63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<script setup lang="ts">
|
||
const props = defineProps<{
|
||
page: number
|
||
pageSize: number
|
||
total: number
|
||
loading?: boolean
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(event: 'change', page: number): void
|
||
}>()
|
||
|
||
function goPrev() {
|
||
if (props.page <= 1 || props.loading) {
|
||
return
|
||
}
|
||
|
||
emit('change', props.page - 1)
|
||
}
|
||
|
||
function goNext() {
|
||
if (props.loading || props.page * props.pageSize >= props.total) {
|
||
return
|
||
}
|
||
|
||
emit('change', props.page + 1)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<footer class="pagination-bar">
|
||
<span>第 {{ page }} 页，共 {{ Math.max(1, Math.ceil(total / pageSize)) }} 页，合计 {{ total }} 条</span>
|
||
<div class="actions">
|
||
<el-button :disabled="page <= 1 || loading" round @click="goPrev">上一页</el-button>
|
||
<el-button :disabled="page * pageSize >= total || loading" round @click="goNext">下一页</el-button>
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.pagination-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-top: 14px;
|
||
color: #64748b;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
@media (max-width: 780px) {
|
||
.pagination-bar {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
</style>
|