zhengyiming
2025-03-27 dce1e84cf258b36c8409352d2e5b7c21a54d0d54
apps/h5/src/components/Layout/LoadingLayout.vue
New file
@@ -0,0 +1,53 @@
<template>
  <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>
    <template v-else>
      <div v-if="props.error">出错了</div>
      <template v-else>
        <slot></slot>
      </template>
    </template>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: 'LoadingLayout',
});
type Props = {
  loading?: boolean;
  error?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  loading: false,
  error: false,
});
</script>
<style lang="scss" scoped>
.loading-layout-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.spinner-wrapper {
  min-height: calc(100vh - 80px);
  // position: relative;
}
.hasTagsView {
  .spinner-wrapper {
    min-height: calc(100vh - 124px);
  }
}
</style>