<script lang="ts" setup name="pages">
const emits = defineEmits(["handleSizeChange", "handleCurrentChange"]);

import { watch } from "vue";
// 接收父页面数据
const props = defineProps<{
  pageTotal: number;
  pageCurrent: number;
  pageSize: number;
}>();

watch(
  () => props.pageTotal,
  (newValue) => {
    console.log(newValue);
  }
);
const handleSizeChange = (val: number) => {
  console.log(val);
  emits("handleSizeChange", val);
};
const handleCurrentChange = (val: number) => {
  console.log(val);
  emits("handleCurrentChange", val);
};
</script>
<template>
  <el-pagination
    class="mt20"
    background
    :total="pageTotal"
    :page-size="pageSize"
    :current-page="pageCurrent"
    :page-sizes="[5, 10, 30, 40]"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    layout="total, prev, pager, next, jumper, sizes"
  />
</template>
<style scoped>
.el-pagination {
  margin-top: 20px;
  /* margin-left: 20px; */
}
</style>
