Skip to content

Commit c2467db

Browse files
kouchaokouchao
committed
新增 分页组件，新增 分页demo
1 parent a254b07 commit c2467db

File tree

6 files changed

+308
-1
lines changed

6 files changed

+308
-1
lines changed

‎src/App.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
<span>组件示例</span>
8383
</template>
8484
<lay-menu-child-item title="弹出层" :to="{name: 'layer'}"></lay-menu-child-item>
85+
<lay-menu-child-item title="分页" :to="{name: 'laypage'}"></lay-menu-child-item>
8586
</lay-menu-item>
8687

8788
</lay-menu>

‎src/components/pagination/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/9/4
3+
*/
4+
5+
import LayPagination from './src/pagination';
6+
7+
/* istanbul ignore next */
8+
LayPagination.install = function(Vue) {
9+
Vue.component(LayPagination.name, LayPagination);
10+
};
11+
12+
export default LayPagination;

‎src/components/pagination/src/pagination.vue

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<template>
2+
<div class="layui-box layui-laypage layui-laypage-default">
3+
4+
<template v-for="lay in layout">
5+
<span v-if="lay == 'total'" class="layui-laypage-count">共 {{total}} 条</span>
6+
<a v-if="lay == 'prev'"
7+
href="javascript:;"
8+
@click="handlePrev"
9+
class="layui-laypage-prev "
10+
:class="{
11+
'layui-disabled': currentPage <= 1
12+
}">
13+
{{prevText}}
14+
</a>
15+
16+
<template v-if="lay == 'body'">
17+
<template v-if="pages.length > pagerCount">
18+
<a v-if="currentPage != 1" @click="handleClick(1)" href="javascript:;">{{1}}</a>
19+
<span v-if="currentPage > 1 + ((pagerCount - 1) / 2)" class="layui-laypage-spr">…</span>
20+
21+
<template v-for="page in pages">
22+
<a v-if="page != currentPage && page > 1 && page < pages.length && (page > currentPage - ((pagerCount - 1) / 2) && page < currentPage + ((pagerCount - 1) / 2))"
23+
@click="handleClick(page)" href="javascript:;">{{page}}</a>
24+
<span v-if="page == currentPage" class="layui-laypage-curr">
25+
<em class="layui-laypage-em"
26+
:class="'layui-bg-' + theme"
27+
:style="color ? 'background-color: ' + color : ''"></em>
28+
<em>{{page}}</em>
29+
</span>
30+
</template>
31+
<span v-if="currentPage < pages.length - ((pagerCount - 1) / 2)" class="layui-laypage-spr">…</span>
32+
<a v-if="currentPage != pages.length" @click="handleClick(pages.length)" href="javascript:;">{{pages.length}}</a>
33+
34+
</template>
35+
<template v-else>
36+
<template v-for="page in pages">
37+
<a v-if="page != currentPage" @click="handleClick(page)" href="javascript:;">{{page}}</a>
38+
<span v-if="page == currentPage" class="layui-laypage-curr">
39+
<em class="layui-laypage-em"
40+
:class="'layui-bg-' + theme"
41+
:style="color ? 'background-color: ' + color : ''"></em>
42+
<em>{{page}}</em>
43+
</span>
44+
</template>
45+
</template>
46+
</template>
47+
48+
49+
<a v-if="lay == 'next'"
50+
href="javascript:;"
51+
@click="handleNext"
52+
class="layui-laypage-next"
53+
:class="{
54+
'layui-disabled': currentPage >= pages.length
55+
}">
56+
{{nextText}}
57+
</a>
58+
59+
<span v-if="lay == 'limit'" class="layui-laypage-limits">
60+
<select :value="size" @change="handleChange">
61+
<option v-for="num in limits" :value="num">{{num}} 条/页</option>
62+
</select>
63+
</span>
64+
65+
<span v-if="lay == 'page'" class="layui-laypage-skip">
66+
到第<input type="text" :value="currentPage" @change="handleChangePage" class="layui-input">页
67+
</span>
68+
69+
</template>
70+
71+
</div>
72+
</template>
73+
74+
<script>
75+
export default {
76+
name: "LayPagination",
77+
data() {
78+
return {
79+
pages: [],
80+
size: 0
81+
}
82+
},
83+
props: {
84+
total: Number,
85+
pageSize: {
86+
type: Number,
87+
default() {
88+
return 10
89+
}
90+
},
91+
currentPage: {
92+
type: Number,
93+
default() {
94+
return 1
95+
}
96+
},
97+
prevText: {
98+
type: String,
99+
default() {
100+
return '上一页'
101+
}
102+
},
103+
nextText: {
104+
type: String,
105+
default() {
106+
return '下一页'
107+
}
108+
},
109+
theme: String,
110+
color: String,
111+
pagerCount: {
112+
type: Number,
113+
default() {
114+
return 7
115+
}
116+
},
117+
layout: {
118+
type: Array,
119+
default() {
120+
return ['prev', 'body', 'next']
121+
}
122+
},
123+
limits: {
124+
type: Array,
125+
default() {
126+
return [10, 20, 30]
127+
}
128+
}
129+
130+
131+
},
132+
mounted() {
133+
this.size = this.pageSize
134+
this.changePages()
135+
},
136+
watch: {
137+
total() {
138+
this.changePages()
139+
140+
},
141+
pageSize() {
142+
this.changePages()
143+
}
144+
},
145+
methods: {
146+
changePages() {
147+
const length = Math.ceil(this.total / this.size)
148+
const pages = []
149+
for (let i = 1; i <= length; i++) {
150+
pages.push(i)
151+
}
152+
this.pages = pages
153+
},
154+
handleChangePage(e){
155+
let page = parseInt(e.target.value) || 1
156+
page = page > this.pages.length ? this.pages.length : page
157+
this.handleClick(page)
158+
},
159+
handleChange(e){
160+
this.size = parseInt(e.target.value)
161+
162+
this.changePages()
163+
this.$emit('update:pageSize', this.size)
164+
this.$emit('size-change', this.size)
165+
},
166+
handleClick(page) {
167+
this.$emit('update:currentPage', page)
168+
this.$emit('current-change', page)
169+
},
170+
handleNext() {
171+
const {currentPage, pages, handleClick} = this
172+
const page = currentPage + 1
173+
if (currentPage < pages.length) {
174+
handleClick(page)
175+
}
176+
},
177+
handlePrev() {
178+
const {currentPage, handleClick} = this
179+
const page = currentPage - 1
180+
if (currentPage > 1) {
181+
handleClick(page)
182+
}
183+
}
184+
}
185+
}
186+
</script>
187+
188+
<style scoped>
189+
190+
</style>

‎src/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import LayTable from '@/components/table'
4141
import LayTableColumn from '@/components/table-column'
4242
import LayAlert from '@/components/alert'
4343
import LaySwitch from '@/components/switch'
44+
import LayPagination from '@/components/pagination'
4445

4546

4647

@@ -89,7 +90,8 @@ const layui = {
8990
LayTable,
9091
LayTableColumn,
9192
LayAlert,
92-
LaySwitch
93+
LaySwitch,
94+
LayPagination
9395
]
9496
components.forEach(function (component) {
9597
Vue.component(component.name, component)

‎src/router.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Tabs from './views/Tabs.vue'
1616
import Animation from './views/Animation.vue'
1717
import Admin from './views/Admin.vue'
1818
import Layer from './views/Layer.vue'
19+
import Laypage from './views/Laypage.vue'
1920

2021
Vue.use(Router)
2122

@@ -100,6 +101,11 @@ export default new Router({
100101
path: '/layer',
101102
name: 'layer',
102103
component: Layer
104+
},
105+
{
106+
path: '/laypage',
107+
name: 'laypage',
108+
component: Laypage
103109
}
104110

105111

‎src/views/Laypage.vue

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<template>
2+
<div>
3+
<lay-block title="总页数低于页码总数"></lay-block>
4+
<lay-pagination :total="70"
5+
:current-page.sync="currentPage"
6+
@current-change="currentChange">
7+
</lay-pagination>
8+
<lay-block title="总页数大于页码总数"></lay-block>
9+
<lay-pagination :total="100"
10+
:current-page.sync="currentPage"
11+
@current-change="currentChange">
12+
</lay-pagination>
13+
<lay-block title="自定义主题 - 颜色随意定义"></lay-block>
14+
<lay-pagination :total="100"
15+
:current-page.sync="currentPage"
16+
@current-change="currentChange"
17+
color="#1E9FFF">
18+
</lay-pagination>
19+
<br>
20+
<lay-pagination :total="100"
21+
:current-page.sync="currentPage"
22+
@current-change="currentChange"
23+
theme="red">
24+
</lay-pagination>
25+
<br>
26+
<lay-pagination :total="100"
27+
:current-page.sync="currentPage"
28+
@current-change="currentChange"
29+
color="#FFB800">
30+
</lay-pagination>
31+
<lay-block title="自定义上一页、下一页文本"></lay-block>
32+
<lay-pagination :total="100"
33+
:current-page.sync="currentPage"
34+
@current-change="currentChange"
35+
theme="red"
36+
prevText="自定义prev"
37+
nextText="自定义next">
38+
</lay-pagination>
39+
<lay-block title="只显示上一页、下一页"></lay-block>
40+
<lay-pagination :total="100"
41+
:current-page.sync="currentPage"
42+
@current-change="currentChange"
43+
:layout="['prev', 'next']">
44+
</lay-pagination>
45+
<lay-block title="显示完整功能"></lay-block>
46+
<lay-pagination :total="100"
47+
:current-page.sync="currentPage"
48+
@current-change="currentChange"
49+
:layout="['total', 'prev', 'body', 'next', 'limit', 'page']">
50+
</lay-pagination>
51+
<lay-block title="自定义排版"></lay-block>
52+
<lay-pagination :total="100"
53+
:current-page.sync="currentPage"
54+
@current-change="currentChange"
55+
:layout="['limit', 'prev', 'body', 'next']">
56+
</lay-pagination>
57+
<br>
58+
<lay-pagination :total="100"
59+
:current-page.sync="currentPage"
60+
@current-change="currentChange"
61+
:layout="['prev', 'next', 'body']">
62+
</lay-pagination>
63+
<br>
64+
<lay-pagination :total="100"
65+
:current-page.sync="currentPage"
66+
@current-change="currentChange"
67+
:layout="['body', 'total']">
68+
</lay-pagination>
69+
<lay-block title="自定义每页条数的选择项"></lay-block>
70+
71+
<lay-block>
72+
修改pageSize就可以了。
73+
</lay-block>
74+
75+
</div>
76+
</template>
77+
78+
<script>
79+
export default {
80+
name: "Laypage",
81+
data(){
82+
return {
83+
currentPage: 1
84+
}
85+
},
86+
methods: {
87+
currentChange(page){
88+
// console.log(page)
89+
}
90+
}
91+
}
92+
</script>
93+
94+
<style scoped>
95+
96+
</style>

0 commit comments

Comments
 (0)