vue3 分页组件的封装 el-pagination以及调用

效果图:

组件封装代码:

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

const props = defineProps({
  pageIndex: Number,
  pageSize: Number,
  total: Number,
});

const { pageIndex, pageSize, total } = toRefs(props);

const emit = defineEmits(['onChangePage']);

const changePage = (page) => {
  emit('onChangePage', page);
};
</script>

<template>
  <ElPagination
    v-model:current-page="pageIndex"
    v-model:page-size="pageSize"
    class="lj-paging"
    layout="total, prev, pager, next, jumper"
    :pager-count="5"
    :total="total"
    @current-change="changePage"
  />
</template>

<style lang="scss" scoped>
.lj-paging {
  :deep(button) {
    width: 25px;
    height: 25px;
    margin: 0 4px;
    border-radius: 50%;
    i {
      font-size: 18px !important;
    }
  }
  :deep(.el-pager) {
    li {
      width: 25px;
      height: 25px;
      margin: 0 4px;
      color: #4382bc;
      font-size: 12px;
      line-height: 25px;
      border-radius: 50%;

      &.is-active {
        color: #00f2fb;
        font-weight: normal;
        background: none;
        border: 1px solid #00f2fb;
        box-shadow: 0 0 10px 0#00f2fb;
      }
    }
  }
  :deep(.el-pagination__jump) {
    font-size: 12px;
  }
  :deep(.el-input__inner) {
    font-size: 12px !important;
  }
}
</style>

调用:

 <PageIndex :total="100" :page-index="1" :page-size="10" @on-change-page="onChangePage" />