8000 add pagination in article list page · pycoder404/blog-vue@97e4361 · GitHub
[go: up one dir, main page]
Skip to content

Commit 97e4361

Browse files
pycoder404pycoder404
committed
add pagination in article list page
1 parent 442be45 commit 97e4361

File tree

7 files changed

+259
-95
lines changed

7 files changed

+259
-95
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/context/
33
/log/
44
node_modules/
5+
node_modules*
56
dist/
67
tmp/
78
npm-debug.log*

‎src/components/PagiNation/index.vue

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<template>
2+
<div :class="{'hidden':hidden}" class="pagination-container">
3+
<el-pagination
4+
:background="background"
5+
small="true"
6+
v-model:current-page="currentPage"
7+
v-model:page-size="pageSize"
8+
:layout="layout"
9+
:page-sizes="pageSizes"
10+
:total="total"
11+
v-bind="$attrs&qu 10000 ot;
12+
default-current-page=1
13+
@size-change="handleSizeChange"
14+
@current-change="handleCurrentChange"
15+
/>
16+
</div>
17+
</template>
18+
19+
<script>
20+
// fixme why use this, @pycoder404
21+
import { scrollTo } from '@/utils/scroll-to'
22+
23+
export default {
24+
name: 'PagiNation',
25+
emits:['update:page','update:limit'],
26+
27+
props: {
28+
total: {
29+
required: true,
30+
type: Number
31+
},
32+
page: {
33+
type: Number,
34+
default: 1
35+
},
36+
limit: {
37+
type: Number,
38+
default: 20
39+
},
40+
pageSizes: {
41+
type: Array,
42+
default() {
43+
return [10, 20, 30, 50]
44+
}
45+
},
46+
layout: {
47+
type: String,
48+
default: 'prev,pager,next,jumper,sizes,total'
49+
},
50+
background: {
51+
type: Boolean,
52+
default: true
53+
},
54+
autoScroll: {
55+
type: Boolean,
56+
default: true
57+
},
58+
hidden: {
59+
type: Boolean,
60+
default: false
61+
}
62+
},
63+
computed: {
64+
currentPage: {
65+
get() {
66+
return this.page
67+
},
68+
set(val) {
69+
this.$emit('update:page', val)
70+
}
71+
},
72+
pageSize: {
73+
get() {
74+
return this.limit
75+
},
76+
set(val) {
77+
this.$emit('update:limit', val)
78+
}
79+
}
80+
},
81+
methods: {
82+
// 这里是原有代码的流程，但是page和pagesize已经是在父组件和子组件通过emit事件双向绑定了，
83+
// 外面直接使用即可，不需要在这里调用的时候传递了
84+
// handleSizeChange(val) {
85+
// this.$emit('pagination', { page: 1, limit: val })
86+
// if (this.autoScroll) {
87+
// scrollTo(0, 800)
88+
// }
89+
// },
90+
handleSizeChange() {
91+
this.$emit('update:page', 1)
92+
this.$emit('pagination')
93+
if (this.autoScroll) {
94+
scrollTo(0, 800)
95+
}
96+
},
97+
handleCurrentChange() {
98+
this.$emit('pagination')
99+
if (this.autoScroll) {
100+
scrollTo(0, 800)
101+
}
102+
}
103+
}
104+
}
105+
</script>
106+
107+
<style scoped>
108+
.pagination-container {
109+
margin-top:0px;
110+
/*background: #fff;*/
111+
padding: 15px 16px;
112+
}
113+
.pagination-container.hidden {
114+
display: none;
115+
}
116+
</style>

‎src/utils/scroll-to.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
Math.easeInOutQuad = function(t, b, c, d) {
2+
t /= d / 2
3+
if (t < 1) {
4+
return c / 2 * t * t + b
5+
}
6+
t--
7+
return -c / 2 * (t * (t - 2) - 1) + b
8+
}
9+
10+
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
11+
var requestAnimFrame = (function() {
12+
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
13+
})()
14+
15+
/**
16+
* Because it's so fucking difficult to detect the scrolling element, just move them all
17+
* @param {number} amount
18+
*/
19+
function move(amount) {
20+
document.documentElement.scrollTop = amount
21+
document.body.parentNode.scrollTop = amount
22+
document.body.scrollTop = amount
23+
}
24+
25+
function position() {
26+
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
27+
}
28+
29+
/**
30+
* @param {number} to
31+
* @param {number} duration
32+
* @param {Function} callback
33+
*/
34+
export function scrollTo(to, duration, callback) {
35+
const start = position()
36+
const change = to - start
37+
const increment = 20
38+
let currentTime = 0
39+
duration = (typeof (duration) === 'undefined') ? 500 : duration
40+
var animateScroll = function() {
41+
// increment the time
42+
currentTime += increment
43+
// find the value with the quadratic in-out easing function
44+
var val = Math.easeInOutQuad(currentTime, start, change, duration)
45+
// move the document.body
46+
move(val)
47+
// do the animation unless its over
48+
if (currentTime < duration) {
49+
requestAnimFrame(animateScroll)
50+
} else {
51+
if (callback && typeof (callback) === 'function') {
52+
// the animation is done so lets callback
53+
callback()
54+
}
55+
}
56+
}
57+
animateScroll()
58+
}

‎src/views/article/components/CategoryAndTag.vue

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,34 @@
22
<div>
33
<div class="article-category">
44
<span>分类: <router-link
5-
:to="{name:'articleListPage',query:{category:'Linux'}}">{{articleDetail.category}}</router-link></span>
5+
:to="{name:'articleListPage',query:{category:articleDetail.category}}">{{articleDetail.category}}</router-link></span>
66
</div>
77
<div class="article-tag">
88
<span>标签: </span>
99
<router-link
1010
v-for="tag in articleDetail.tags"
1111
:key="tag"
12-
:to="{name:'articleListPage',query:{tags:tag}}"
12+
:to="{name:'articleListPage',query:{tags: tag}}"
1313
>
1414
{{' ' + tag }}
1515
</router-link>
1616
</div>
1717

18-
1918
</div>
2019

2120
</template>
2221

2322
<script>
2423
25-
2624
export default {
2725
name: 'CategoryAndTag',
2826
components: {
29-
// Upload,
30-
// StickyNav,
31-
// CommentDropdown,
32-
// PlatformDropdown,
33-
// SourceUrlDropdown
3427
},
3528
props: {
3629
articleDetail: {
3730
type: Object
3831
}
3932
},
40-
data() {
41-
42-
return {
43-
image_upload_url: 'http://10.89.228.206:28088/files/upload/',
44-
// postForm: Object.assign({}, defaultForm),
45-
loading: false,
46-
tempRoute: {},
47-
articleTags: [],
48-
articleCategories: [],
49-
}
50-
},
51-
created() {
52-
// Why need to make a copy of this.$route here?
53-
// Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
54-
// https://github.com/PanJiaChen/vue-element-admin/issues/1221
55-
this.tempRoute = Object.assign({}, this.$route)
56-
}
5733
}
5834
5935
</script>

0 commit comments

Comments
 (0)
0