xiangyuan-app/src/components/loader/SimplePageListLoader.vue

<template>
  <slot />
  <Loadmore
    v-if="loader.status.value == 'loading' 
      || (loader.status.value == 'nomore' && !$slots.empty && props.showNoMore)" 
    :status="loader.status.value" 
  />
  <slot v-else-if="loader.status.value == 'empty'" name="empty">
    <Empty :description="emptyView?.text || '暂无数据'" />
  </slot>
  <Loadmore 
    v-else-if="loader.status.value == 'error'"
    status="loadmore" 
    :loadmoreText="loader.error.value" 
    @loadmore="handleRetry" 
  />
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import type { ISimplePageListLoader } from '../composeabe/loader/SimplePageListLoader';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import Empty from '../feedback/Empty.vue';

const props = defineProps({	
  loader: {
    type: Object as PropType<ISimplePageListLoader<any, any>>,
    default: null,
  },
  showNoMore: {
    type: Boolean,
    default: true,
  },
  emptyView: {
    type: Object as PropType<{
      text: string;
    }>,
    default: null,
  },
})

function handleRetry() {
  props.loader.reload();
}
</script>