Skip to content

Commit 2864976

Browse files
author
reco_luan
committed
feat: add asynchronous load configuration
1 parent 9659482 commit 2864976

File tree

3 files changed

+113
-65
lines changed

3 files changed

+113
-65
lines changed

‎components/NoteAbstract.vue‎

Lines changed: 36 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,52 @@
11
<template>
22
<div class="abstract-wrapper">
3-
<div
4-
v-for="(item, index) in data"
5-
:key="item.path"
6-
v-show="index >= (currentPage * 10 - 10) && index < currentPage * 10"
7-
class="abstract-item">
8-
<div class="title">
9-
<router-link
10-
:to="item.path">{{item.title}}</router-link>
11-
</div>
12-
<div class="abstract" v-html="item.excerpt"></div>
13-
<hr>
14-
<PageInfo :pageInfo="item" :hideAccessNumber="!(hideAccessNumber !== true)" :currentTag="currentTag"></PageInfo>
3+
<div v-if="listLoadType === 'sync'" key="sync">
4+
<NoteAbstractItem
5+
v-for="(item, index) in data"
6+
:key="item.path"
7+
:item="item"
8+
:currentPage="currentPage"
9+
:currentTag="currentTag"
10+
:hideAccessNumber="hideAccessNumber"
11+
v-show="index >= (currentPage * 10 - 10) && index < currentPage * 10"/>
12+
</div>
13+
<div v-else-if="listLoadType === 'async'" key="async">
14+
<NoteAbstractItem
15+
v-for="(item, index) in currentPageData"
16+
:key="item.path"
17+
:item="item"
18+
:currentPage="currentPage"
19+
:currentTag="currentTag"
20+
:hideAccessNumber="true" />
1521
</div>
1622
</div>
1723
</template>
1824

1925
<script>
20-
import PageInfo from './PageInfo'
26+
import NoteAbstractItem from './NoteAbstractItem'
2127
2228
export default {
23-
components: { PageInfo },
24-
props: ['data', 'currentPage', 'currentTag', 'hideAccessNumber']
29+
components: { NoteAbstractItem },
30+
props: ['data', 'currentPage', 'currentTag', 'hideAccessNumber'],
31+
computed: {
32+
listLoadType () {
33+
const valineConfig = this.$themeConfig.valineConfig
34+
if (valineConfig && !valineConfig.hideAccessNumber) {
35+
return 'sync'
36+
} else {
37+
return 'async'
38+
}
39+
},
40+
currentPageData () {
41+
const start = this.currentPage * 10 - 10
42+
const end = this.currentPage * 10
43+
return this.data.slice(start, end)
44+
}
45+
}
2546
}
2647
</script>
2748

2849
<style lang="stylus" scoped>
29-
@require '../styles/recoConfig.styl'
30-
3150
.abstract-wrapper
3251
width 100%
33-
.abstract-item
34-
margin: 0 auto 20px;
35-
padding: 16px 20px;
36-
width 100%
37-
overflow: hidden;
38-
border-radius: $borderRadius
39-
box-shadow: $boxShadow;
40-
box-sizing: border-box;
41-
transition all .3s
42-
background-color $bgColor
43-
&:hover
44-
box-shadow: $boxShadowHover
45-
.title
46-
position: relative;
47-
font-size: 1.28rem;
48-
line-height: 36px;
49-
display: inline-block;
50-
:after
51-
content: "";
52-
position: absolute;
53-
width: 100%;
54-
height: 2px;
55-
bottom: 0;
56-
left: 0;
57-
background-color: $accentColor;
58-
visibility: hidden;
59-
-webkit-transform: scaleX(0);
60-
transform: scaleX(0);
61-
transition: .3s ease-in-out;
62-
:hover:after
63-
visibility visible
64-
-webkit-transform: scaleX(1);
65-
transform: scaleX(1);
66-
.tags
67-
.tag-item
68-
cursor: pointer;
69-
&.active
70-
color $accentColor
71-
&:hover
72-
color $accentColor
73-
74-
@media (max-width: $MQMobile)
75-
.tags
76-
display block
77-
margin-top 1rem;
78-
margin-left: 0!important;
7952
</style>

‎components/NoteAbstractItem.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div
3+
class="abstract-item">
4+
<div class="title">
5+
<router-link :to="item.path">{{item.title}}</router-link>
6+
</div>
7+
<div class="abstract" v-html="item.excerpt"></div>
8+
<hr>
9+
<PageInfo
10+
:pageInfo="item"
11+
:hideAccessNumber="!(hideAccessNumber !== true)"
12+
:currentTag="currentTag">
13+
</PageInfo>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import PageInfo from './PageInfo'
19+
20+
export default {
21+
components: { PageInfo },
22+
props: ['item', 'currentPage', 'currentTag', 'hideAccessNumber']
23+
}
24+
</script>
25+
26+
<style lang="stylus" scoped>
27+
@require '../styles/recoConfig.styl'
28+
29+
.abstract-item
30+
margin: 0 auto 20px;
31+
padding: 16px 20px;
32+
width 100%
33+
overflow: hidden;
34+
border-radius: $borderRadius
35+
box-shadow: $boxShadow;
36+
box-sizing: border-box;
37+
transition all .3s
38+
background-color $bgColor
39+
&:hover
40+
box-shadow: $boxShadowHover
41+
.title
42+
position: relative;
43+
font-size: 1.28rem;
44+
line-height: 36px;
45+
display: inline-block;
46+
:after
47+
content: "";
48+
position: absolute;
49+
width: 100%;
50+
height: 2px;
51+
bottom: 0;
52+
left: 0;
53+
background-color: $accentColor;
54+
visibility: hidden;
55+
-webkit-transform: scaleX(0);
56+
transform: scaleX(0);
57+
transition: .3s ease-in-out;
58+
:hover:after
59+
visibility visible
60+
-webkit-transform: scaleX(1);
61+
transform: scaleX(1);
62+
.tags
63+
.tag-item
64+
cursor: pointer;
65+
&.active
66+
color $accentColor
67+
&:hover
68+
color $accentColor
69+
70+
@media (max-width: $MQMobile)
71+
.tags
72+
display block
73+
margin-top 1rem;
74+
margin-left: 0!important;
75+
</style>

‎components/PageInfo.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<i
99
v-if="pageInfo.frontmatter.date"
1010
class="iconfont reco-date">
11-
<span>{{ pageInfo.frontmatter.date | formatDate }}</span>
11+
<span>{{ pageInfo.frontmatter.date | formatDate }}{{$themeConfig.commentsSolution}}</span>
1212
</i>
1313
<i
14-
v-if="$themeConfig.commentsSolution === 'valine' && hideAccessNumber !== true"
14+
v-if="hideAccessNumber !== true"
1515
class="iconfont reco-eye">
1616
<AccessNumber
1717
:idVal="pageInfo.path"

0 commit comments

Comments
 (0)
⚡