100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
defineProps<{
|
|
loading: boolean
|
|
error: boolean
|
|
empty: boolean
|
|
errMsg?: object
|
|
}>()
|
|
|
|
const emit = defineEmits(['reload']),
|
|
|
|
handleReload = () => {
|
|
emit('reload')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="{ 'justify-center': (empty || error) }"
|
|
class="container flex"
|
|
>
|
|
<!-- 加载骨架 -->
|
|
<div
|
|
v-if="loading"
|
|
class="h-56 w-full text-2xl font-bold"
|
|
>
|
|
<slot name="skeleton">
|
|
<div class="grid w-full grid-cols-1 gap-4 overflow-hidden sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
<div
|
|
v-for="index of 3"
|
|
:key="index"
|
|
class="h-56 animate-pulse rounded-2xl bg-gray-200"
|
|
/>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="w-full"
|
|
>
|
|
<!-- 错误处理 -->
|
|
<div
|
|
v-if="error"
|
|
@click="handleReload"
|
|
>
|
|
<div class="flex items-center justify-center gap-8">
|
|
<p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">
|
|
载入错误
|
|
</p>
|
|
<img
|
|
class="h-32 w-auto relative"
|
|
src="~/assets/images/common/plana_e.png"
|
|
alt=""
|
|
>
|
|
</div>
|
|
<div
|
|
v-if="errMsg"
|
|
class="bg-white mt-4 p-4 border border-dashed rounded-md"
|
|
style="font-family: 'LXGW WenKai Mono', monospace"
|
|
>
|
|
{{ errMsg }}
|
|
</div>
|
|
<p class="text-right text-xs">
|
|
(点击重试)
|
|
</p>
|
|
</div>
|
|
<div v-else>
|
|
<!-- 正式内容 -->
|
|
<div v-if="empty">
|
|
<div
|
|
v-if="empty"
|
|
class="flex items-center justify-center gap-8"
|
|
@click="handleReload"
|
|
>
|
|
<p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">
|
|
最近没有动态~
|
|
</p>
|
|
<img
|
|
class="h-32 w-auto relative"
|
|
src="~/assets/images/common/plana_e.png"
|
|
alt=""
|
|
>
|
|
</div>
|
|
<p class="text-right text-xs">
|
|
(点击重试)
|
|
</p>
|
|
</div>
|
|
|
|
<slot
|
|
v-else
|
|
name="default"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|