SOURCE

<template>
  <el-pagination
    v-bind="props"
    class="el-pagination--base"
    background
    v-model:current-page="modelCurrentPage"
    v-model:page-size="modelPageSize"
  >
  </el-pagination>
</template>

<script setup>
import { ElPagination } from 'element-plus';
import { ref, toRefs, computed, nextTick } from 'vue';

defineOptions({
  inheritAttrs: false,
});

const props = defineProps({
  ...ElPagination.props,
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSizes: {
    type: Array,
    default: [5, 10, 50, 100],
  },
  layout: {
    type: String,
    default: 'prev, pager, next, jumper',
    // 显示全的配置： 'total, sizes, prev, pager, next, jumper'
  },
  beforeCallback: {
    type: Function,
  },
});

const emits = defineEmits([
  ...Object.keys(ElPagination.emits),
  'update:currentPage',
  'update:pageSize',
  'currentPage',
  'pageSizePage',
  'paginationChange',
]);

const { currentPage, pageSize, defaultPageSize, beforeCallback } = toRefs(props);

const modelCurrentPage = computed({
  get() {
    return currentPage.value;
  },
  set(newVal) {
    const callback = () => {
      emits('update:currentPage', newVal);
      emits('currentPage', newVal);
      emits('paginationChange', { currentPage: newVal, pageSize: modelPageSize.value });
    };
    // 存在前置拦截回调时
    if (
      beforeCallback.value &&
      !beforeCallback.value(() => {
        callback();
      })
    ) {
      return;
    }
    callback();
  },
});

const modelPageSize = computed({
  get() {
    return pageSize.value || defaultPageSize.value;
  },
  set(newVal) {
    const callback = () => {
      emits('update:pageSize', newVal);
      emits('pageSizePage', newVal);
      modelCurrentPage.value = 1;
    };
    // 存在前置拦截回调时
    if (
      beforeCallback.value &&
      !beforeCallback.value(() => {
        callback();
      })
    ) {
      return;
    }
    callback();
  },
});
</script>

<style lang="scss">
.el-pagination--base {
  justify-content: flex-end;
  .el-pager li.is-active {
    font-weight: normal;
  }
}
</style>