29 lines
822 B
Vue
29 lines
822 B
Vue
<script setup lang="ts" generic="T">
|
|
import { NSpin } from 'naive-ui'
|
|
|
|
/** 移动端列表卡片化容器:接管加载 / 空态,卡片体由默认插槽渲染 */
|
|
const props = defineProps<{
|
|
items: T[]
|
|
loading?: boolean
|
|
itemKey: (item: T) => string | number
|
|
emptyText?: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-2.5">
|
|
<div
|
|
v-if="props.loading && !props.items.length"
|
|
class="panel flex items-center justify-center py-10"
|
|
>
|
|
<NSpin size="small" />
|
|
</div>
|
|
<div v-else-if="!props.items.length" class="panel py-10 text-center text-[13px] text-ink-3">
|
|
{{ props.emptyText ?? '暂无数据' }}
|
|
</div>
|
|
<div v-for="it in props.items" v-else :key="props.itemKey(it)" class="panel px-4 py-3">
|
|
<slot :item="it"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|