| | |
| | | <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 class="loading-layout-wrapper"> |
| | | <div class="spinner-wrapper" v-if="props.loading"> |
| | | <div class="el-loading-spinner"> |
| | | <el-icon class="is-loading"> |
| | | <Loading /> |
| | | </el-icon> |
| | | <p class="el-loading-text">拼命加载中</p> |
| | | </div> |
| | | </div> |
| | | </nut-empty> |
| | | <template v-else> |
| | | <NoData v-if="showNoData" /> |
| | | <slot v-else></slot> |
| | | </template> |
| | | <template v-else> |
| | | <div v-if="props.error">出错了</div> |
| | | <template v-else> |
| | | <slot></slot> |
| | | </template> |
| | | </template> |
| | | </div> |
| | | </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); |
| | | type Props = { |
| | | loading?: boolean; |
| | | error?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | loading: false, |
| | | error: false, |
| | | }); |
| | | </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'); |
| | | } |
| | | <style lang="scss" scoped> |
| | | .loading-layout-wrapper { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .loading-layout-error-wrapper { |
| | | height: 100%; |
| | | .spinner-wrapper { |
| | | min-height: calc(100vh - 80px); |
| | | // position: relative; |
| | | } |
| | | |
| | | .hasTagsView { |
| | | .spinner-wrapper { |
| | | min-height: calc(100vh - 124px); |
| | | } |
| | | } |
| | | </style> |