请给出 element-ui 中 vue2版本的分页组件完整功能代码，并给处每段代码的中文注释

因为element-ui中分页组件分为两种：默认分页和带有背景色的分页，因此需要选择一种并提供更具体的描述。下面我们以默认分页组件为例，给出完整的vue2版本分页组件的代码以及注释。

<template>
  <el-pagination
    :total="total"        // 总页数
    :page-size="pageSize" // 每页显示的条数
    :current-page="currentPage" // 当前页码
    :layout="layout"  // 分页组件的布局，分别为 total, sizes, prev, pager, next, jumper，使用逗号分隔
    :pager-count="pagerCount"  // 页码按钮的数量
    :prev-text="`上一页`"   // 上一页显示的文字
    :next-text="`下一页`"   // 下一页显示的文字
    @size-change="handleSizeChange" // 当每页条数改变时触发
    @current-change="handleCurrentChange"  // 当前页码改变时触发
    class="pagination"
    :disabled="disabled"
  />
</template>

<script>
export default {
  name: 'MyPagination',  // 组件名称
  props: {
    total: {  // 总页数
      type: Number,
      default: 0
    },
    pageSize: {  // 每页显示的条数
      type: Number,
      default: 10
    },
    currentPage: {  // 当前页
      type: Number,
      default: 1
    },
    disabled: {  // 是否禁用
      type: Boolean,
      default: false
    },
    pagerCount: {  // 页码按钮的数量
      type: Number,
      default: 7
    },
    layout: {  // 分页组件的布局
      type: String,
      default: 'total,sizes,prev,pager,next,jumper'
    }
  },
  methods: {
    handleSizeChange(pageSize) {  // 每页条数改变时触发
      this.$emit('size-change', pageSize)
    },
    handleCurrentChange(currentPage) {  // 当前页数改变时触发
      this.$emit('current-change', currentPage)
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
</style>