117 lines
2.4 KiB
Vue
117 lines
2.4 KiB
Vue
<template>
|
|
<div v-if="visible" class="pagination-container">
|
|
<a-pagination
|
|
:total="total"
|
|
:current="current"
|
|
:page-size="pageSize"
|
|
:show-total="true"
|
|
:show-page-size="true"
|
|
:page-size-options="[10, 20, 50, 100]"
|
|
:show-jumper="true"
|
|
:hide-on-single-page="false"
|
|
size="default"
|
|
@change="handlePageChange"
|
|
@page-size-change="handlePageSizeChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 定义props
|
|
const props = defineProps({
|
|
total: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
current: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
pageSize: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
// 定义emit事件
|
|
const emit = defineEmits(['page-change', 'page-size-change']);
|
|
|
|
// 处理页码变化
|
|
const handlePageChange = (page) => {
|
|
emit('page-change', page);
|
|
};
|
|
|
|
// 处理每页条数变化
|
|
const handlePageSizeChange = (pageSize) => {
|
|
emit('page-size-change', pageSize);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pagination-container {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-bg-1);
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
z-index: 10;
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination) {
|
|
margin: 0;
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-item) {
|
|
border-radius: 6px;
|
|
margin: 0 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-item:hover) {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-item-active) {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: white;
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-prev),
|
|
.pagination-container :deep(.arco-pagination-next) {
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-prev:hover),
|
|
.pagination-container :deep(.arco-pagination-next:hover) {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-size-changer) {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-jumper) {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.pagination-container :deep(.arco-pagination-total) {
|
|
color: var(--color-text-2);
|
|
font-size: 14px;
|
|
}
|
|
</style>
|