42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
defineProps<{
|
||
|
|
loading: boolean
|
||
|
|
error: boolean
|
||
|
|
empty: boolean
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits(['reload'])
|
||
|
|
|
||
|
|
const 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>
|
||
|
|
</div>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
<div v-else class="w-full">
|
||
|
|
<!-- 错误处理 -->
|
||
|
|
<div v-if="error" class="flex h-56 flex-col items-center justify-center" @click="handleReload">
|
||
|
|
<span class="mb-4 text-8xl">❌</span>
|
||
|
|
<span class="text-center text-2xl font-bold">载入错误</span>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<!-- 正式内容 -->
|
||
|
|
<span v-if="empty" class="text-2xl font-bold">最近没有动态</span>
|
||
|
|
<slot v-else name="default"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|