Skip to content

Commit 4f3f351

Browse files
author
Tenny
committed
Pagination
Signed-off-by: Tenny <tenny.shu@foxmail.com>
1 parent 4d50cc6 commit 4f3f351

File tree

12 files changed

+226
-3
lines changed

12 files changed

+226
-3
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,10 @@ export default defineConfig({
168168
text: 'Tag 标签',
169169
link: '/components/tag',
170170
},
171+
{
172+
text: 'Pagination 分页',
173+
link: '/components/pagination',
174+
},
171175
],
172176
},
173177
{

‎docs/.vitepress/theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import '../../../style/select-ori';
3737
import '../../../style/date-picker-ori';
3838
import '../../../style/page-header';
3939
import '../../../style/tag';
40+
import '../../../style/pagination';
4041

4142
export default {
4243
extends: DefaultTheme,

‎docs/components/pagination.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Pagination 分页
2+
3+
当数据量过多时，使用分页分批次加载数据。
4+
5+
## 演示
6+
7+
<script setup>
8+
import { Pagination } from "../../src"
9+
</script>
10+
11+
### 基础用法
12+
13+
只需要传递 `total` 或者 `page-count` 就能显示一个分页组件. 在 `change` 事件中进行分页处理.
14+
15+
<ClientOnly>
16+
<CodePreview>
17+
<textarea lang="vue">
18+
<script setup lang="ts">
19+
</script>
20+
<template>
21+
<hr />
22+
</template>
23+
</textarea>
24+
<template #preview>
25+
<Pagination :total="100"></Pagination>
26+
</template>
27+
</CodePreview>
28+
</ClientOnly>
29+
30+
## API
31+
32+
### Pagination Props
33+
34+
<!-- prettier-ignore -->
35+
| 参数 | 说明 | 类型 | 默认值 |
36+
| --- | --- | --- | --- |
37+
| x | x | x | x |

‎scripts/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ async function createComponentTemplate(name) {
5252
configContent = configContent.replace(configReg, (m, b) => {
5353
const configJson = looseJsonParse(b);
5454
const sidebar = configJson.themeConfig.sidebar;
55-
sidebar[1].items.push({
55+
sidebar[3].items.push({
5656
text: name,
5757
link: `/components/${name.toLowerCase()}`,
5858
});

‎src/components/Pagination.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<ul class="nt-pagination">
3+
<!-- 上一页切换按钮 -->
4+
<li class="nt-pagination-item">
5+
<Button title="上一页" :disabled="currentPage === 1">
6+
<ArrowLeft></ArrowLeft>
7+
</Button>
8+
</li>
9+
<!-- 首页按钮 -->
10+
<li class="nt-pagination-item">
11+
<a href="javascript:void" title="1">1</a>
12+
</li>
13+
<!-- 上一页更多按钮 -->
14+
<li class="nt-pagination-item">
15+
<a
16+
href="javascript:void"
17+
title="more"
18+
@mouseenter="handleMoreHover(1)"
19+
@mouseleave="handleMoreHover(0)"
20+
>
21+
<More v-if="moreFocus === 0"></More>
22+
<DArrowLeft v-else-if="moreFocus === 1"></DArrowLeft>
23+
</a>
24+
</li>
25+
<!-- 末尾页按钮 -->
26+
<li class="nt-pagination-item" v-if="totalPage > 1">
27+
<a href="javascript:void" :title="totalPage + ''">{{ totalPage }}</a>
28+
</li>
29+
<!-- 下一页切换按钮 -->
30+
<li class="nt-pagination-item">
31+
<Button title="下一页" :disabled="currentPage === totalPage">
32+
<ArrowRight></ArrowRight>
33+
</Button>
34+
</li>
35+
</ul>
36+
</template>
37+
<script setup lang="ts">
38+
import { computed, ref, watch } from 'vue';
39+
import Button from './Button.vue';
40+
import ArrowLeft from './icon/ArrowLeft.vue';
41+
import ArrowRight from './icon/ArrowRight.vue';
42+
import More from './icon/More.vue';
43+
import DArrowLeft from './icon/DArrowLeft.vue';
44+
import DArrowRight from './icon/DArrowRight.vue';
45+
46+
const moreFocus = ref(0);
47+
48+
function handleMoreHover(n: number) {
49+
moreFocus.value = n;
50+
}
51+
52+
const props = withDefaults(
53+
defineProps<{
54+
/** 数据总数 */
55+
total?: number;
56+
/** 总页数 */
57+
pageCount?: number;
58+
/** 每页显示条目个数 */
59+
pageSize?: number;
60+
/** 页码 */
61+
page?: number;
62+
/** 默认当前页码 */
63+
defaultCurrentPage?: number;
64+
}>(),
65+
{
66+
pageSize: 10,
67+
defaultCurrentPage: 1,
68+
},
69+
);
70+
71+
const emits = defineEmits(['update:page']);
72+
73+
const totalPage = computed(() => {
74+
let pageCount = props.pageCount;
75+
if (pageCount == null && props.total != null) {
76+
pageCount = Math.ceil(props.total / props.pageSize);
77+
}
78+
if (pageCount == null || pageCount <= 0) {
79+
pageCount = 1;
80+
}
81+
return pageCount;
82+
});
83+
const currentPage = ref(props.page || props.defaultCurrentPage);
84+
85+
if (props.page == null) {
86+
emits('update:page', currentPage.value);
87+
}
88+
89+
watch(
90+
() => props.page,
91+
(page) => {
92+
currentPage.value = page || props.defaultCurrentPage;
93+
},
94+
);
95+
</script>

‎src/components/icon/DArrowLeft.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<BaseIcon>
3+
<path
4+
fill="currentColor"
5+
d="M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"
6+
></path>
7+
</BaseIcon>
8+
</template>
9+
<script setup lang="ts">
10+
import BaseIcon from './Base.vue';
11+
</script>

‎src/components/icon/DArrowRight.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<BaseIcon>
3+
<path
4+
fill="currentColor"
5+
d="M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688m-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"
6+
></path>
7+
</BaseIcon>
8+
</template>
9+
<script setup lang="ts">
10+
import BaseIcon from './Base.vue';
11+
</script>

‎src/components/icon/More.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<BaseIcon>
3+
<path
4+
fill="currentColor"
5+
d="M176 416a112 112 0 1 1 0 224 112 112 0 0 1 0-224m336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224m336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224"
6+
></path>
7+
</BaseIcon>
8+
</template>
9+
<script setup lang="ts">
10+
import BaseIcon from './Base.vue';
11+
</script>

‎src/index.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ export { default as RefreshLeftIcon } from './components/icon/RefreshLeft.vue';
1919
export { default as RefreshRightIcon } from './components/icon/RefreshRight.vue';
2020
export { default as SortIcon } from './components/icon/Sort.vue';
2121
export { default as CloseIcon } from './components/icon/Close.vue';
22+
export { default as MoreIcon } from './components/icon/More.vue';
23+
export { default as DArrowLeft } from './components/icon/DArrowLeft.vue';
24+
export { default as DArrowRight } from './components/icon/DArrowRight.vue';
2225

2326
export { default as Input } from './components/Input.vue';
2427
export { default as Button } from './components/Button.vue';
@@ -61,5 +64,6 @@ export { default as List } from './components/List.vue';
6164

6265
export { default as Clickoutside } from './directives/clickoutside';
6366
export { default as Loading } from './directives/loading';
64-
export { default as PageHeader } from "./components/PageHeader.vue";
65-
export { default as Tag } from "./components/Tag.vue";
67+
export { default as PageHeader } from './components/PageHeader.vue';
68+
export { default as Tag } from './components/Tag.vue';
69+
export { default as Pagination } from './components/Pagination.vue';

‎src/style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,14 @@
176176
border: 1px solid #e6e6e6;
177177
}
178178
}
179+
180+
.nt-pagination {
181+
list-style: none;
182+
183+
li + li {
184+
margin-top: 0;
185+
}
186+
}
179187
}
180188

181189
@media screen and (max-width: 768px) {

0 commit comments

Comments
 (0)