mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 14:47:18 +00:00
添加加载状态指示器,优化友链列表渲染逻辑,确保数据加载完成后显示内容
This commit is contained in:
@ -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"
|
||||
@ -47,6 +53,8 @@ url: "您的博客链接"</pre
|
||||
</div>
|
||||
</el-card> -->
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -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>
|
||||
|
Reference in New Issue
Block a user