添加加载状态指示器,优化友链列表渲染逻辑,确保数据加载完成后显示内容

This commit is contained in:
2025-03-05 23:07:23 +08:00
parent e90753a878
commit 3c96ba8ae7

View File

@ -1,6 +1,12 @@
<template> <template>
<div class="friend-links"> <div class="friend-links">
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :rows="10" animated />
</div>
<!-- 友链列表 --> <!-- 友链列表 -->
<template v-else>
<div>
<el-card <el-card
v-for="(category, categoryIndex) in friendLinks" v-for="(category, categoryIndex) in friendLinks"
:key="categoryIndex" :key="categoryIndex"
@ -47,6 +53,8 @@ url: "您的博客链接"</pre
</div> </div>
</el-card> --> </el-card> -->
</div> </div>
</template>
</div>
</template> </template>
<script> <script>
@ -58,7 +66,7 @@ export default {
setup() { setup() {
const friendLinks = ref([]); const friendLinks = ref([]);
const hoveredCardId = ref(null); const hoveredCardId = ref(null);
const loading = ref(true);
// 加载 YAML 文件 // 加载 YAML 文件
fetch("/links.yml") fetch("/links.yml")
.then((response) => response.text()) .then((response) => response.text())
@ -67,6 +75,9 @@ export default {
}) })
.catch((error) => { .catch((error) => {
console.error("Failed to load YAML file:", error); console.error("Failed to load YAML file:", error);
})
.finally(() => {
loading.value = false; // 数据加载完成后,设置 loading 为 false
}); });
const hoverEffect = (cardId) => { const hoverEffect = (cardId) => {
@ -94,10 +105,10 @@ export default {
resetEffect, resetEffect,
cardStyle, cardStyle,
openLink, openLink,
loading,
}; };
}, },
}; };
</script> </script>
<style scoped> <style scoped>
@ -185,4 +196,8 @@ export default {
font-size: 0.9em; font-size: 0.9em;
color: #666; color: #666;
} }
.loading-container {
padding: 20px;
}
</style> </style>