69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<template>
|
|
<div class="cms-list-pagination mt-16">
|
|
<el-pagination
|
|
v-model:current-page="page"
|
|
v-model:page-size="limit"
|
|
:page-sizes="pageSizes"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next"
|
|
@change="onChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const pageSizes = [10, 20, 50];
|
|
|
|
defineProps({
|
|
total: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const page = defineModel<number>('page', { required: true });
|
|
const limit = defineModel<number>('limit', { required: true });
|
|
|
|
const emit = defineEmits<{
|
|
change: [page: number, limit: number];
|
|
}>();
|
|
|
|
const onChange = (nextPage: number, nextLimit: number): void => {
|
|
emit('change', nextPage, nextLimit);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/breakpoints' as *;
|
|
|
|
.cms-list-pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@media (max-width: $cms-bp-tablet) {
|
|
.cms-list-pagination {
|
|
justify-content: center;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.cms-list-pagination :deep(.el-pagination) {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $cms-bp-phone) {
|
|
.cms-list-pagination :deep(.el-pagination__sizes),
|
|
.cms-list-pagination :deep(.el-pagination__total) {
|
|
display: none;
|
|
}
|
|
|
|
.cms-list-pagination :deep(.el-pagination) {
|
|
--el-pagination-button-width: 28px;
|
|
--el-pagination-button-height: 28px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|