顶部列表异步动画

components/index/TopBar.vue

@@ -5,10 +5,11 @@ let route = useRoute()
 // const handleSelect = (key: string, keyPath: string[]) => {
 //   console.log(key, keyPath)
 // }
-
+const dataLoading = ref<boolean>(true)
 const HotArray = ref([])
 $fetch("https://data.zziyu.cn/hot/webs").then(data=>{
   HotArray.value=data as any
+  dataLoading.value=false
 })
 // console.log(HotArray)
 </script>
@@ -27,6 +28,7 @@ $fetch("https://data.zziyu.cn/hot/webs").then(data=>{
       <el-sub-menu index="/data/all">
         <template #title>数据收集</template>
         <el-menu-item index="/data/all">总览</el-menu-item>
+        <el-menu-item v-if="dataLoading" v-loading="dataLoading">列表</el-menu-item>
         <el-menu-item v-for="(item,index) in HotArray" :key="index" :index="'/data/'+item">{{item}}</el-menu-item>
 <!--        <el-menu-item index="/data/bilibili">bilibili</el-menu-item>-->
 <!--        <el-menu-item index="/data/baidu">baidu</el-menu-item>-->