<template>
|
<div v-if="loading" class="loading-layout-loading-content-wrapper">
|
<IconFont name="loading" />
|
<div class="list-empty-hint-text">数据加载中......</div>
|
</div>
|
<nut-empty
|
v-else-if="error"
|
class="loading-layout-error-wrapper"
|
status="error"
|
description="加载失败"
|
>
|
<div :style="{ marginTop: '10px' }">
|
<nut-button type="primary" @click="loadError"> 重试 </nut-button>
|
</div>
|
</nut-empty>
|
<template v-else>
|
<NoData v-if="showNoData" />
|
<slot v-else></slot>
|
</template>
|
</template>
|
|
<script setup lang="ts">
|
import { loadingLayoutProps } from './layout';
|
import { IconFont } from '@nutui/icons-vue-taro';
|
import NoData from '../NoData/NoData.vue';
|
|
defineOptions({
|
name: 'LoadingLayout',
|
});
|
|
const props = defineProps(loadingLayoutProps);
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.loading-layout-loading-content-wrapper {
|
padding: 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.nut-icon {
|
color: boleGetCssVar('text-color', 'primary');
|
margin-right: 8px;
|
}
|
|
.list-empty-hint-text {
|
line-height: 1;
|
font-size: 30px;
|
color: boleGetCssVar('text-color', 'primary');
|
}
|
}
|
|
.loading-layout-error-wrapper {
|
height: 100%;
|
}
|
</style>
|
