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 | 81 +++++++++++++---------------------------
1 files changed, 26 insertions(+), 55 deletions(-)
diff --git a/src/components/mini/box3-archive.vue b/src/components/mini/box3-archive.vue
index 78c36b7..e0c3f50 100644
--- a/src/components/mini/box3-archive.vue
+++ b/src/components/mini/box3-archive.vue
@@ -1,27 +1,27 @@
<template>
<div class="blog-container archive">
<span class="blog-pigeonhole">
- <router-link to="/tagTime?type=1">
+ <router-link :to="{name:'tagTime'}">
归档信息
</router-link>
</span>
- <div class="blog-scroll ">
- <div v-for="yearData in myData">
- <router-link to="/tagTime?type=2">
+ <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="/tagTime?type=3">
+ <router-link :to="{name:'tagTime',
+ 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>
@@ -30,7 +30,9 @@
import {
archive
} from '../../api/blogStatistics.js'
+
export default {
+
beforeMount() {
archive({}).then((res) => {
this.myData = res.data;
@@ -38,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": [],
}
}
}
@@ -92,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 {
@@ -109,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;
}
@@ -130,7 +101,7 @@
/*让弹性盒元素在必要的时候拆行：*/
align-content: flex-start;
-webkit-align-content: flex-start;
-
+ transition: all 1 ease;
}
.blog-pigeonhole-item {
--
Gitblit v1.9.1