この記事では、Vue3、element-ui、TypeScript を使用してグローバル ページネーション コンポーネントをカプセル化する方法について説明します。
環境に依存する
開始する前に、次の環境をインストールする必要があります。
- ビュー 3
- 要素 ui
- TypeScript
コンポーネント機能
このページング コンポーネントは次の機能を提供します。
- 各ページに表示される項目数のカスタマイズのサポート
- 指定したページ番号へのカスタムジャンプをサポート
- 総ページ数と総アイテム数の表示をサポート
- カスタムスタイルのサポート
コンポーネントの実装
ページングコンポーネントの構造
ページネーション コンポーネントは次の部分で構成されます。
<template>
<div class="pagination">
<el-pagination
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
:layout="'total, sizes, prev, pager, next, jumper'"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
ページングコンポーネントのプロパティ
ページネーション コンポーネントは次のプロパティを提供します。
| 属性名 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| 合計 | 番号 | 0 | 総数 |
| ページサイズ | 番号 | 10 | ページごとに表示されるアイテムの数 |
| 現在のページ | 番号 | 1 | 現在のページ番号 |
ページネーションコンポーネントメソッド
ページネーション コンポーネントは次のメソッドを提供します。
| メソッド名 | 説明 |
|---|---|
| ハンドルサイズ変更 | ページごとに表示されるアイテムの数が変更されたときにトリガーされます |
| 現在の変更を処理する | ページ番号が変更されるとトリガーされます |
ページネーションコンポーネントのスタイル
次のスタイルを変更することで、ページネーション コンポーネントのスタイルをカスタマイズできます。
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.el-pagination__sizes {
display: flex;
align-items: center;
margin-left: 20px;
}
.el-pagination__jump {
margin-left: 20px;
}
.el-pagination__total {
margin-right: 20px;
}
ページネーションコンポーネントを使用する
ページネーション コンポーネントの使用は非常に簡単です。カプセル化された Pagination コンポーネントを Vue コンポーネントに導入し、それをテンプレートで使用するだけです。
<template>
<div class="page">
<pagination
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
/>
</div>
</template>
<script lang="ts">
import {
defineComponent, ref } from 'vue'
import Pagination from '@/components/Pagination.vue'
export default defineComponent({
name: 'Page',
components: {
Pagination,
},
setup() {
const total = ref(1000)
const pageSize = ref(10)
const currentPage = ref(1)
return {
total,
pageSize,
currentPage,
}
},
})
</script>
要約する
この記事では、Vue3、element-ui、TypeScript を使用してグローバル ページネーション コンポーネントをカプセル化する方法について説明します。独自のニーズに応じて、提供されるページネーション コンポーネントのスタイルとプロパティを変更できます。