增强异步体验

pages/data/all.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 
-const getWebArr:string[] = await $fetch("https://data.zziyu.cn/hot/webs")
+const getWebArr = reactive<string[]>([])
+const loading = ref(true)
+$fetch("https://data.zziyu.cn/hot/webs").then((rawData)=>{
+  const data = rawData as unknown as string[]
+  data.map(m=>getWebArr.push(m))
+  loading.value=false
+})
 
 </script>
 
 <template>
   <Title>数据收集</Title>
-  <div style="display: flex;align-items: center;justify-content: center;flex-direction: column">
+  <div v-loading="loading" style="min-height: 100px;display: flex;align-items: center;justify-content: center;flex-direction: column">
     <DataTimesTop v-for="(item,index) in getWebArr" :fromWeb="item" :limit="10" :hours="1" :key="index"></DataTimesTop>
   </div>
 </template>