Skip to content

Commit 12dd6c1

Browse files
author
Tenny
committed
Pagination: 简单分页完成
Signed-off-by: Tenny <joel.shu@qq.com>
1 parent 7705e18 commit 12dd6c1

File tree

6 files changed

+132
-50
lines changed

6 files changed

+132
-50
lines changed

‎docs/components/pagination.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,21 @@
8484
</CodePreview>
8585
</ClientOnly>
8686

87+
### 简单分页
88+
89+
简单的分页，在空间有限的情况下，可以使用简单分页。
90+
91+
<ClientOnly>
92+
<CodePreview>
93+
<textarea lang="vue-html">
94+
<nt-pagination :page-count="100" simple></nt-pagination>
95+
</textarea>
96+
<template #preview>
97+
<Pagination :page-count="100" simple></Pagination>
98+
</template>
99+
</CodePreview>
100+
</ClientOnly>
101+
87102
## API
88103

89104
### Pagination Props

‎src/components/Input.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const props = withDefaults(
3232
},
3333
);
3434
35-
const emits = defineEmits(['update:modelValue']);
35+
const emits = defineEmits(['update:modelValue', 'input']);
3636
3737
function focus() {
3838
if (el.value != null) {
@@ -43,6 +43,7 @@ function focus() {
4343
function handleInput(e: Event) {
4444
const $target = e.target as HTMLInputElement;
4545
let value = $target.value;
46+
emits('input', e);
4647
if (props.parser != null) {
4748
value = props.parser(value) as string;
4849
$target.value = String(value);

‎src/components/Pagination.vue‎

Lines changed: 99 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,57 +13,75 @@
1313
<ArrowLeft></ArrowLeft>
1414
</Button>
1515
</li>
16-
<!-- 首页按钮 -->
17-
<li :class="['nt-pagination-item', currentPage === 1 ? 'is-active' : '']">
18-
<a href="javascript:void" title="1" @click="handleTo(1)">1</a>
19-
</li>
20-
<!-- 向前5页 -->
21-
<li class="nt-pagination-item" v-if="currentPage > 4">
22-
<a
23-
href="javascript:void"
24-
@mouseenter="handleMoreHover(1)"
25-
@mouseleave="handleMoreHover(0)"
26-
title="向前5页"
27-
@click="handleTo(currentPage - 5)"
16+
<template v-if="simple">
17+
<li class="nt-pagination-item nt-pagination-simple-layout">
18+
<input
19+
class="nt-input nt-pagination-simple-input"
20+
:value="currentPage"
21+
type="text"
22+
inputmode="numeric"
23+
@input="handlePageInput"
24+
@keyup.enter="handlePageSure"
25+
@blur="handlePageSure"
26+
/>
27+
<span class="nt-pagination-simple-divide">/</span>
28+
<span>{{ totalPage }}</span>
29+
</li>
30+
</template>
31+
<template v-else>
32+
<!-- 首页按钮 -->
33+
<li :class="['nt-pagination-item', currentPage === 1 ? 'is-active' : '']">
34+
<a href="javascript:void" title="1" @click="handleTo(1)">1</a>
35+
</li>
36+
<!-- 向前5页 -->
37+
<li class="nt-pagination-item" v-if="currentPage > 4">
38+
<a
39+
href="javascript:void"
40+
@mouseenter="handleMoreHover(1)"
41+
@mouseleave="handleMoreHover(0)"
42+
title="向前5页"
43+
@click="handleTo(currentPage - 5)"
44+
>
45+
<More v-if="moreFocus !== 1"></More>
46+
<DArrowLeft v-else-if="moreFocus === 1"></DArrowLeft>
47+
</a>
48+
</li>
49+
<!-- 中间部分，显示包括当前页在内的最多5页 -->
50+
<li
51+
v-for="n in centerRange"
52+
:key="n"
53+
:class="['nt-pagination-item', currentPage === n ? 'is-active' : '']"
2854
>
29-
<More v-if="moreFocus !== 1"></More>
30-
<DArrowLeft v-else-if="moreFocus === 1"></DArrowLeft>
31-
</a>
32-
</li>
33-
<!-- 中间部分，显示包括当前页在内的最多5页 -->
34-
<li
35-
v-for="n in centerRange"
36-
:key="n"
37-
:class="['nt-pagination-item', currentPage === n ? 'is-active' : '']"
38-
>
39-
<a href="javascript:void" :title="String(n)" @click="handleTo(n)">{{
40-
n
41-
}}</a>
42-
</li>
43-
<!-- 向后5页 -->
44-
<li class="nt-pagination-item" v-if="currentPage < totalPage - 3">
45-
<a
46-
href="javascript:void"
47-
@mouseenter="handleMoreHover(2)"
48-
@mouseleave="handleMoreHover(0)"
49-
title="向前5页"
50-
@click="handleTo(currentPage + 5)"
55+
<a href="javascript:void" :title="String(n)" @click="handleTo(n)">{{
56+
n
57+
}}</a>
58+
</li>
59+
<!-- 向后5页 -->
60+
<li class="nt-pagination-item" v-if="currentPage < totalPage - 3">
61+
<a
62+
href="javascript:void"
63+
@mouseenter="handleMoreHover(2)"
64+
@mouseleave="handleMoreHover(0)"
65+
title="向前5页"
66+
@click="handleTo(currentPage + 5)"
67+
>
68+
<More v-if="moreFocus !== 2"></More>
69+
<DArrowRight v-else-if="moreFocus === 2"></DArrowRight>
70+
</a>
71+
</li>
72+
<!-- 末尾页按钮 -->
73+
<li
74+
v-if="totalPage > 1"
75+
@click="handleTo(totalPage)"
76+
:class="[
77+
'nt-pagination-item',
78+
currentPage === totalPage ? 'is-active' : '',
79+
]"
5180
>
52-
<More v-if="moreFocus !== 2"></More>
53-
<DArrowRight v-else-if="moreFocus === 2"></DArrowRight>
54-
</a>
55-
</li>
56-
<!-- 末尾页按钮 -->
57-
<li
58-
v-if="totalPage > 1"
59-
@click="handleTo(totalPage)"
60-
:class="[
61-
'nt-pagination-item',
62-
currentPage === totalPage ? 'is-active' : '',
63-
]"
64-
>
65-
<a href="javascript:void" :title="totalPage + ''">{{ totalPage }}</a>
66-
</li>
81+
<a href="javascript:void" :title="totalPage + ''">{{ totalPage }}</a>
82+
</li>
83+
</template>
84+
6785
<!-- 下一页切换按钮 -->
6886
<li class="nt-pagination-item">
6987
<Button
@@ -103,12 +121,15 @@ const props = withDefaults(
103121
align?: 'start' | 'center' | 'end';
104122
/** 只有一页时是否隐藏分页器 */
105123
hideOnSinglePage?: boolean;
124+
/** 是否为简单分页 */
125+
simple?: boolean;
106126
}>(),
107127
{
108128
pageSize: 10,
109129
defaultCurrentPage: 1,
110130
align: 'start',
111131
hideOnSinglePage: false,
132+
simple: false,
112133
},
113134
);
114135
@@ -175,4 +196,33 @@ function handleTo(p: number) {
175196
emits('change', p);
176197
}
177198
}
199+
200+
function handlePageInput(e: Event) {
201+
const $target = e.target as HTMLInputElement;
202+
const value = $target.value;
203+
let val: string | number = parseInt(value, 10);
204+
if (Number.isNaN(val)) {
205+
val = '';
206+
} else {
207+
val = Math.abs(val);
208+
if (val < 1) {
209+
val = 1;
210+
} else if (val > totalPage.value) {
211+
val = totalPage.value;
212+
}
213+
}
214+
val = String(val);
215+
if (val !== value) {
216+
$target.value = val;
217+
}
218+
}
219+
220+
function handlePageSure(e: Event) {
221+
const $target = e.target as HTMLInputElement;
222+
const value = $target.value;
223+
const pageValue = parseInt(value, 10);
224+
if (!Number.isNaN(pageValue)) {
225+
handleTo(pageValue);
226+
}
227+
}
178228
</script>

‎src/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,8 @@
179179

180180
.nt-pagination {
181181
list-style: none;
182+
margin: 0;
183+
padding: 0;
182184

183185
li + li {
184186
margin-top: 0;

‎style/pagination/index.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,16 @@
5252
color: var(--nt-primary-color, #52c41a);
5353
border-color: var(--nt-primary-color, #52c41a);
5454
}
55+
56+
.nt-pagination .nt-pagination-simple-input {
57+
--nt-input-width: 60px;
58+
--nt-form-edit-height: 100%;
59+
text-align: center;
60+
}
61+
.nt-pagination-simple-layout {
62+
display: inline-flex;
63+
align-items: center;
64+
}
65+
.nt-pagination-simple-divide {
66+
margin: 0 5px;
67+
}

‎style/pagination/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import '../button/index.js';
22
import '../icon/index.js';
3+
import '../input/index.js';
34
import './index.css';

0 commit comments

Comments
 (0)