63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<template>
|
|
<div class="blog-archive blog-section card-item">
|
|
<h4 class="module-title">文章归档</h4>
|
|
|
|
<el-date-picker
|
|
v-model="currentYear"
|
|
type="year" placeholder="请选择年份"
|
|
style="width: 100px"
|
|
@change="changeDateEvent"
|
|
/>
|
|
|
|
<span class="total">共计{{ blogStore.blogList.length }}篇文章</span>
|
|
|
|
<el-timeline class="time-line">
|
|
<el-timeline-item v-for="(value, index) in blogStore.blogList" :key="index">
|
|
<div class="item">
|
|
<span class="date">{{ value.createTime }}</span>
|
|
<span class="title" @click="viewBlogClick(index)">{{ value.title }}</span>
|
|
</div>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useBlogStore } from '@/store/blog.ts'
|
|
import { useRouter } from 'vue-router'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const blogStore = useBlogStore()
|
|
const router = useRouter()
|
|
const currentYear = ref(new Date())
|
|
|
|
onMounted(() => {
|
|
blogStore.queryBlogByCondition({
|
|
year: (new Date()).getFullYear()
|
|
})
|
|
})
|
|
|
|
/**
|
|
* 选择年份事件
|
|
* @param value 年份
|
|
*/
|
|
const changeDateEvent = async (value: Date) => {
|
|
await blogStore.queryBlogByCondition({
|
|
year: value.getFullYear()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击查看博客按钮
|
|
* @param index 索引
|
|
*/
|
|
const viewBlogClick = async (index: number) => {
|
|
const blogId = blogStore.blogList[index].id
|
|
await router.push({ name: 'BlogDetail', params: { id: blogId } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/blog/blog.archive.module.scss";
|
|
</style>
|