Zengtudor/DataFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

异步获取数据，加载动画

Browse Source
This commit is contained in:
ZtRXR 2023-09-03 12:04:43 +08:00
parent d59b289e96
commit 842db049e7
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/data/DataTimesTop.vue
View File

@ -17,14 +17,23 @@ interface TopHots{
searchUrl: string searchUrl: string
} }
} }
const rawData:TopHots[] = await $fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
const data:TopHots[] = [] const rawData = reactive<TopHots[]>([])
rawData.forEach(d=>{ const loading = ref(true)
let newD= d;
let aDate = new Date(Date.parse(d.lastTime)) $fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
newD.lastTime=aDate.toLocaleString() .then((dataRaw)=>{
data.push(newD) let data = dataRaw as unknown as TopHots[]
}) data.forEach(d=>{
let newD= d;
let aDate = new Date(Date.parse(d.lastTime))
newD.lastTime=aDate.toLocaleString()
rawData.push(newD)
})
loading.value = false
})
const router = useRouter() const router = useRouter()
const gotoWeb = (row, column, cell, event)=>{ const gotoWeb = (row, column, cell, event)=>{
// console.log(row.fromWeb.searchUrl+row.word) // console.log(row.fromWeb.searchUrl+row.word)
@ -34,7 +43,7 @@ const gotoWeb = (row, column, cell, event)=>{
<template> <template>
<client-only> <client-only>
<el-table :data="data" style="width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="" @cell-dblclick="gotoWeb"> <el-table v-loading="loading" :data="rawData" style="min-height: 200px;width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="" @cell-dblclick="gotoWeb">
<el-table-column prop="word" :label="props.fromWeb+' 持久热搜'" width="180" /> <el-table-column prop="word" :label="props.fromWeb+' 持久热搜'" width="180" />
<el-table-column prop="lastTime" label="最后上榜" width="180" /> <el-table-column prop="lastTime" label="最后上榜" width="180" />
<el-table-column prop="times" label="上榜次数" /> <el-table-column prop="times" label="上榜次数" />