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 | 98 +++++++++++++++++-------------------------------
1 files changed, 35 insertions(+), 63 deletions(-)
diff --git a/src/components/mini/box3-archive.vue b/src/components/mini/box3-archive.vue
index bf6d70b..e0c3f50 100644
--- a/src/components/mini/box3-archive.vue
+++ b/src/components/mini/box3-archive.vue
@@ -1,88 +1,47 @@
<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">
- <p class="blog-pigeonhole-p">{{yearData.year}}</p>
+ <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>
<script>
+ import {
+ archive
+ } from '../../api/blogStatistics.js'
+
export default {
+
+ beforeMount() {
+ archive({}).then((res) => {
+ this.myData = res.data;
+ })
+ },
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": "9",
- "count": 6
- },
- {
- "month": "8",
- "count": 5
- },
- {
- "month": "7",
- "count": 4
- },
- {
- "month": "6",
- "count": 3
- },
- {
- "month": "5",
- "count": 2
- },
- {
- "month": "4",
- "count": 1
- }
- ]
- }
- ],
+ showLess: true,
+ "myData": [],
}
}
}
@@ -91,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 {
@@ -108,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;
}
@@ -129,7 +101,7 @@
/*让弹性盒元素在必要的时候拆行：*/
align-content: flex-start;
-webkit-align-content: flex-start;
-
+ transition: all 1 ease;
}
.blog-pigeonhole-item {
--
Gitblit v1.9.1