45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<template>
|
|
<div class="blog-category blog-section common-mobile-view">
|
|
<span class="total">目前共计{{ blogStore.blogCategoryList.length }}个分类</span>
|
|
|
|
<div class="category-list card-item">
|
|
<div v-for="(item, index) in blogStore.blogCategoryList"
|
|
:key="index" class="item" @click="viewBlogCategoryClick(item.name)">
|
|
<i class="fa-solid fa-book"></i>
|
|
<div class="content">
|
|
<span class="label">{{ item.name }}</span>
|
|
<span class="value">共 {{ item.count }} 篇文档</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useBlogStore } from '@/store/blog.ts'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { useRouter } from 'vue-router'
|
|
import { onMounted } from 'vue'
|
|
|
|
const blogStore = useBlogStore()
|
|
const appStore = useAppStore()
|
|
const router = useRouter()
|
|
|
|
onMounted(() => {
|
|
blogStore.queryBlogCategory()
|
|
})
|
|
|
|
/**
|
|
* 点击查看博客分类信息
|
|
* @param name 类别名称
|
|
*/
|
|
const viewBlogCategoryClick = async (name: string) => {
|
|
appStore.isShowMobileBack = true
|
|
await router.push({ name: 'BlogCategoryName', params: { name } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/blog/blog.category.module";
|
|
</style>
|