<script lang="ts" setup>
import { computed } from "vue";
defineOptions({
name: "MyPagination"
});
const props = defineProps({
// total 总条数
total: {
required: true,
type: Number,
default: 0
},
// page 当前页
page: {
type: Number,
default: 1
},
// 每页条数
limit: {
type: Number,
default: 20
},
// 每页条数选项
pageSizes: {
type: Array,
default() {
return [10, 20, 50, 100];
}
},
// 分页布局
layout: {
type: String,
default: "total, prev, pager, next, sizes, jumper"
},
// 是否显示背景色
background: {
type: Boolean,
default: true
},
// 是否自动滚动到顶部
autoScroll: {
type: Boolean,
default: true
}
});
// 定义emit
const emit = defineEmits(["pagination", "update:page", "update:limit"]);
// 定义当前页
const currentPage = computed({
get() {
return props.page;
},
set(newValue) {
// 更新当前页
emit("update:page", newValue);
console.log(newValue);
}
});
// 定义每页条数
const pageSize = computed({
get() {
return props.limit;
},
set(newValue) {
// 更新每页条数
emit("update:limit", newValue);
}
});
// 监听每页条数变化
const handleSizeChange = val => {
emit("pagination", { page: currentPage.value, limit: val });
};
// 监听当前页变化
const handleCurrentChange = val => {
emit("pagination", { page: val, limit: pageSize.value });
};
</script>
<template>
<div class="MyPagination">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="pageSizes"
:layout="layout"
:total="total"
:background="background"
v-bind="$attrs"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<style lang="scss" scoped>
.MyPagination {
display: flex;
justify-content: center;
}
</style>
|
