@corgicoding-el/data-pagination/README.md

基于element-plus的分页组件

# @corgicoding-el/data-pagination

为 `@corgicoding/web-quick-start` 工程模板设定的分页组件，基于 `el-pagination` 封装

## 绑定依赖

无

## 如何使用

安装工程到本地，并按需使用或全局使用

### 前置依赖

- element-plus
- vue (3.x)

如果没有以上依赖，工程执行以下命令进行安装

```shell
pnpm install element-plus vue -S
```

如果使用 `web-quick-start` 模板则无需任何操作，上述依赖已经在模板安装

### 安装

使用 `pnpm` 下载

```shell
pnpm install @corgicoding-el/data-pagination -S
```

## 使用

### props入参

```ts
export interface DataPaginaitonProps {
  currentPage?: number; // 当前页
  pageSize?: number; // 每页占据数量
  small?: boolean; // 是否为 small 样式
  disabled?: boolean; // 是否禁用
  background?: boolean; // 是否有深色背景
  total?: number; // 总计数目
  componentOptions?: any; // el-pagination 原生参数
  eventOptions?: any; // el-pagination 原生事件
}
```

### emits 事件

```ts
// 触发方法返给上一级
const Emits = defineEmits([
  'size-change', // 页码数变化
  'current-change', // 当前页变化
  'update:current-page',
  'update:pageSize'
]);
```

### 暴露参数

```ts
defineExpose({
  elRef
});
```

### 按需使用

较为完整的案例如下

```vue
<script setup lang="ts">
import DataPagination from '@corgicoding-el/data-pagination';

const pageSetting = reactive({
  current: 1,
  size: 10,
  total: 100
});

const changeCurrentPage = (val: number) => {};
const changePageSize = (val: number) => {};
</script>

<template>
  <DataPagination
    v-model:current-page="pageSetting.current"
    v-model:page-size="pageSetting.size"
    :total="pageSetting.total"
    class="data-grid__pagination-footer"
    @current-change="changeCurrentPage"
    @size-change="changePageSize"
  ></DataPagination>
</template>
```

### 全局引入

在 `main.ts` 引入

```ts
import DataPagination from '@corgicoding-el/data-pagination';

app.use(DataPagination);
```

### 原生 element-plus 使用

文档： https://element-plus.org/zh-CN/component/pagination.html#api

- 所有 `element-plus` 的 `pagination` 参数属性直接直接绑定在组件元素上
- 所有 `element-plus` 的 `pagination` 事件可以通用 `eventOptions` 进行绑定

```vue
<DataPagination
  v-model:current-page="pageSetting.current"
  v-model:page-size="pageSetting.size"
  :total="pageSetting.total"
  class="data-grid__pagination-footer"
  @current-change="changeCurrentPage"
  @size-change="changePageSize"
  :component-options="{
    prevIcon: 'Search'
  }"
  :event-options="{
    'next-click': () => {}
  }"
></DataPagination>
```