NaEasy UI

Appearance

LoadingPage 加载中页面 ​

介绍 ​

LoadingPage 是一个全屏显示加载状态的组件，用于在数据加载时向用户提供视觉反馈。

导入 ​

js
import LoadingPage from '@/components/display/loading/LoadingPage.vue'

用法 ​

基础用法 ​

基础的加载页面组件，显示加载动画和默认的"加载中"文本。组件默认会占满父级。

vue
<template>
  <view style="position: relative; height: 300px; background-color: #f5f5f5;">
    <LoadingPage v-if="showLoading" />
    <text style="padding: 20rpx;font-size:58rpx;">这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域</text>
  </view>
  <Button 
    text="显示加载页面" 
    type="primary" 
    @click="simulateLoading()"
    style="margin-top: 20rpx;"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LoadingPage from '@/components/display/loading/LoadingPage.vue';
import Button from '@/components/basic/Button.vue';

// 是否显示加载页面
const showLoading = ref(false);

// 模拟加载操作
function simulateLoading(duration: number = 2000) {
  showLoading.value = true;
  setTimeout(() => {
    showLoading.value = false;
  }, duration);
}
</script>

自定义加载文本 ​

通过 loading-text 属性自定义加载提示文本。

vue
<template>
  <view style="position: relative; height: 200px; background-color: #f5f5f5;">
    <text style="padding: 20rpx;font-size:58rpx;">这里是内容区域这里是内容区域这里是内容区域这里是内容区域这里是内容区域</text>
    <LoadingPage loading-text="正在加载数据..." />
  </view>
</template>

自定义颜色 ​

通过 indicator-color 属性自定义加载器的颜色。

vue
<template>
  <view style="display: flex; gap: 20rpx;">
    <view style="position: relative; height: 150px; width: 50%; background-color: #f5f5f5;">
      <LoadingPage loading-text="primary" indicator-color="primary" />
    </view>
    <view style="position: relative; height: 150px; width: 50%; background-color: #f5f5f5;">
      <LoadingPage loading-text="success" indicator-color="success" />
    </view>
  </view>
  <view style="display: flex; gap: 20rpx; margin-top: 20rpx;">
    <view style="position: relative; height: 150px; width: 50%; background-color: #f5f5f5;">
      <LoadingPage loading-text="warning" indicator-color="warning" />
    </view>
    <view style="position: relative; height: 150px; width: 50%; background-color: #f5f5f5;">
      <LoadingPage loading-text="danger" indicator-color="danger" />
    </view>
  </view>
</template>

自定义文本样式 ​

通过 loading-text-props 属性自定义加载文本的样式。

vue
<template>
  <view style="position: relative; height: 200px; background-color: #f5f5f5;">
    <LoadingPage 
      loading-text="请稍候..."
      :loading-text-props="{
        fontSize: 32,
        fontWeight: 'bold',
        color: 'primary'
      }"
    />
  </view>
</template>

自定义容器背景 ​

通过 inner-style 属性自定义加载页面容器的样式。

vue
<template>
  <view style="position: relative; height: 200px; background-color: #e0f7fa;">
    <LoadingPage 
      loading-text="半透明背景"
      :inner-style="{ backgroundColor: 'rgba(255, 255, 255, 0.7)' }"
    />
  </view>
</template>

自定义下方内容插槽 ​

通过默认插槽添加自定义内容。

vue
<template>
  <view style="position: relative; height: 200px; background-color: #f5f5f5;">
    <LoadingPage>
      <Height :height="20" />
      <Button text="取消" type="primary" />
    </LoadingPage>
  </view>
</template>

API 参考 ​

LoadingPage ​

全屏加载状态组件。

Props ​

名称说明类型必填默认值
loadingText加载器下方文字string否'加载中'
loadingTextProps加载器下方文字样式object否-
indicatorColor加载器颜色string否'primary'
indicatorStyle加载器样式object否-
innerStyle容器自定义样式object否-

Slots ​

名称说明
default加载器下方的自定义内容

主题变量 ​

名称类型默认值说明
LoadingPageBackgroundColorstringmask.white加载页面背景色
LoadingPageIndicatorColorstringprimary加载器颜色