cantyonion/WebIndex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加加载骨架

Browse Source
This commit is contained in:
Jeffrey Hsu 2024-10-02 14:57:30 +08:00
parent 35545dc215
commit 44ceb8ce2b
1 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/home/HomeView.vue
View File

@ -7,11 +7,38 @@ import NavBar from "@/components/nav/NavBar.vue";
import IntroCard from "@/components/card/IntroCard.vue";
const recentPosts = ref<IPost[] | null>(null);
const isLoading = ref(true);
const isError = ref(false);
const hasPosts = computed(() => (recentPosts.value ?? []).length > 0);
const postsData = computed(() => {
if (!recentPosts.value) return [];
if (recentPosts.value.length > 4)
return recentPosts.value.slice(0, 4)
return recentPosts.value
})
const reloadPosts = async () => {
try {
isLoading.value = true
const postData = await getBlogRecentPost();
recentPosts.value = postData.data.dataSet
isLoading.value = false
} catch (e) {
isLoading.value = false
isError.value = true
}
}
onMounted(async () => {
const postData = await getBlogRecentPost();
recentPosts.value = postData.data.dataSet
try {
const postData = await getBlogRecentPost();
recentPosts.value = postData.data.dataSet
isLoading.value = false
} catch (e) {
isLoading.value = false
isError.value = true
}
})
</script>
@ -36,10 +63,24 @@ onMounted(async () => {
</a>
</div>
<!-- 内容 -->
<div :class="{'justify-center': !hasPosts}" class="container flex">
<span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
<div v-else class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
<div :class="{'justify-center': (!hasPosts || isError)}" class="container flex">
<div v-if="isLoading" class="h-56 w-full text-2xl font-bold">
<div
class="grid w-full grid-cols-1 gap-4 overflow-hidden sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div v-for="index of 3" :key="index" class="h-56 animate-pulse rounded-2xl bg-gray-200"></div>
</div>
</div>
<div v-else>
<div v-if="isError" class="flex flex-col" @click="reloadPosts">
<span class="text-8xl mb-4">❌</span>
<span class="text-2xl font-bold text-center">载入错误</span>
</div>
<div v-else>
<span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
<div v-else class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<article-card v-for="item in postsData" :key="item.cid" :post="item"/>
</div>
</div>
</div>
</div>
</div>