From c3aa826406d52957d6f98d0ecd4b77413d5ce908 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 29 Aug 2022 18:23:08 +0800
Subject: [PATCH] 统计模块异步加载
---
src/components/mini/box3-archive.vue | 76 +++++++++++--------------------------
1 files changed, 23 insertions(+), 53 deletions(-)
diff --git a/src/components/mini/box3-archive.vue b/src/components/mini/box3-archive.vue
index f9bc2d1..e0c3f50 100644
--- a/src/components/mini/box3-archive.vue
+++ b/src/components/mini/box3-archive.vue
@@ -5,24 +5,23 @@
归档信息
</router-link>
</span>
- <div class="blog-scroll ">
- <div v-for="yearData in myData">
+ <div class="blog-scroll" v-bind:class="{miniHeight:showLess,maxHeight:!showLess}">
+ <div v-for="(yearData,index) in myData" class="fade" v-if="index < 2 || !showLess">
<router-link :to="{name:'tagTime',query:{year:yearData.year}}">
<p class="blog-pigeonhole-p">{{yearData.year}}年</p>
</router-link>
<div class="blog-pigeonhole-list">
-
<div class="blog-pigeonhole-item" v-for="item in yearData.list">
<router-link :to="{name:'tagTime',
- query:{year:yearData.year,month:item.month}}">
+ query:{year:yearData.year,month:item.month}}">
<span>{{item.month}}月</span>
</router-link>
<span>{{item.count}}篇</span>
-
</div>
</div>
</div>
</div>
+ <div @click="()=>showLess=!showLess" v-if="myData.length>2 && showLess">...</div>
</div>
</template>
@@ -31,7 +30,9 @@
import {
archive
} from '../../api/blogStatistics.js'
+
export default {
+
beforeMount() {
archive({}).then((res) => {
this.myData = res.data;
@@ -39,52 +40,8 @@
},
data() {
return {
- "myData": [
- // {
- // "year": "2022",
- // "list": [{
- // "month": "12",
- // "count": 10
- // },
- // {
- // "month": "10",
- // "count": 11
- // },
- // {
- // "month": "9",
- // "count": 9
- // }
- // ]
- // },
- // {
- // "year": "2021",
- // "list": [{
- // "month": "12",
- // "count": 8
- // },
- // {
- // "month": "10",
- // "count": 7
- // },
- // {
- // "month": "7",
- // "count": 4
- // },
- // {
- // "month": "6",
- // "count": 3
- // },
- // {
- // "month": "5",
- // "count": 2
- // },
- // {
- // "month": "4",
- // "count": 1
- // }
- // ]
- // }
- ],
+ showLess: true,
+ "myData": [],
}
}
}
@@ -93,11 +50,24 @@
</script>
<style lang="less">
+ .blog-scroll {
+ transition: all ease-in-out 0.8s;
+ }
+
+ .miniHeight {
+ max-height: 150px;
+ }
+
+ .maxHeight {
+ max-height: 800px;
+ }
+
/*归档部分*/
.archive {
a {
color: black;
}
+
}
.blog-pigeonhole {
@@ -110,7 +80,7 @@
line-height: 20px;
border-radius: 6px 6px 6px 6px;
/*background-color: #edf0f3;*/
- margin-left: 3%;
+ margin-left: 5%;
margin-bottom: 3%;
opacity: 0.7;
}
@@ -131,7 +101,7 @@
/*让弹性盒元素在必要的时候拆行：*/
align-content: flex-start;
-webkit-align-content: flex-start;
-
+ transition: all 1 ease;
}
.blog-pigeonhole-item {
--
Gitblit v1.9.1