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

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

View File

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