简化ElPagination的使用

import { computed, reactive, ref } from 'vue'

/**
 * 简化分页器的使用
 * @exmaple
 * ```
 * const page = usePage()
 *
 * <ElPagination v-bind="page" />
 * ```
 */
export const usePage = (
  defaultCurrentPage: number = 1,
  defaultPageSize: number = 10,
  defaultTotal: number = 0,
) => {
  const currentPage = ref(defaultCurrentPage)
  const pageSize = ref(defaultPageSize)
  const total = ref(defaultTotal)

  return reactive({
    currentPage,
    pageSize,
    total,
    'onUpdate:currentPage': (val: number) => {
      currentPage.value = val
    },
    'onUpdate:pageSize': (val: number) => {
      pageSize.value = val
    },
  })
}

众所周知 v-model:value = :value + @update:value 而@xxx会被转化为 onXxx的形式 on+大写字母开头的词 所以v-model:currentPage = :currentPage+onUpdate:currentPage 这一点其实可以在vue的插件里看出来
此外 v-bind="xxx"可以把变量按属性名绑定到组件上 @xxx和onXxx虽然效果上一致 但@是vue指令 作为属性名没有用 需要用onXx的形式