Loading 加载

加载数据时显示动效。

?

名称	分类	说明	类型	默认值
LoadingIndicatorvariant	? 风格	动画变体	'spinner' | 'dots' | 'bars' | 'ring'	'spinner'
LoadingIndicatorsize	? 风格	指示器尺寸	'xs' | 'sm' | 'md' | 'lg'	'md'
LoadingIndicatortype	? 风格	颜色主题	'primary' | 'success' | 'info' | 'warning' | 'danger'	'primary'
LoadingIndicatorcolor	? 风格	自定义颜色（十六进制）	string	—
background	? 风格	遮罩背景色	string	—
v-loading	? 行为	是否显示加载	boolean	—
fullscreen	? 行为	是否全屏加载	boolean	false
lock	? 行为	锁定屏幕滚动	boolean	false
target	? 内容	加载需要覆盖的目标元素	HTMLElement | string	document.body
text	? 内容	加载文案	string	—
spinner	? 内容	自定义加载图标	string | boolean	—
close	? 方法	关闭 Loading	() => void	—

动画变体

PxLoadingIndicator 是独立的加载指示器组件，包含 4 种像素风格动画变体。

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <div v-for="v in variants" :key="v" style="text-align: center">
      <px-loading-indicator :variant="v" size="lg" />
      <p style="margin-top: 8px; font-size: 12px">{{ v }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const variants = ['spinner', 'dots', 'bars', 'ring'] as const;
</script>

尺寸

使用 size 控制指示器尺寸：xs (16px)、sm (20px)、md (24px)、lg (32px)。

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <div v-for="s in sizes" :key="s" style="text-align: center">
      <px-loading-indicator :size="s" />
      <p style="margin-top: 8px; font-size: 12px">{{ s }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const sizes = ['xs', 'sm', 'md', 'lg'] as const;
</script>

类型 / 颜色

使用 type 设置预设主题色，或使用 color 自定义十六进制颜色。

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <div v-for="t in types" :key="t" style="text-align: center">
      <px-loading-indicator :type="t" size="lg" />
      <p style="margin-top: 8px; font-size: 12px">{{ t }}</p>
    </div>
    <div style="text-align: center">
      <px-loading-indicator color="#8B5CF6" size="lg" />
      <p style="margin-top: 8px; font-size: 12px">custom</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

区域加载

在容器中加载数据时显示。内部使用 PxLoadingIndicator 组件。

<template>
  <div class="demo-loading">
    <div v-loading="loading" class="loading-area">
      <p>Content area</p>
    </div>
    <px-button @click="toggleLoading">Toggle Loading</px-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(true);

const toggleLoading = () => {
  loading.value = !loading.value;
};
</script>

<style scoped>
.demo-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loading-area {
  width: 100%;
  height: 150px;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

自定义

可以自定义加载文案、背景色等。

<template>
  <div class="demo-loading">
    <div
      v-loading="loading"
      px-loading-text="Loading..."
      px-loading-background="rgba(0, 0, 0, 0.7)"
      class="loading-area"
    >
      <p>Custom loading text and background</p>
    </div>
    <px-button @click="toggleLoading">Toggle Loading</px-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(true);

const toggleLoading = () => {
  loading.value = !loading.value;
};
</script>

<style scoped>
.demo-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loading-area {
  width: 100%;
  height: 150px;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

全屏加载

使用全屏加载。

<template>
  <px-button v-loading.fullscreen="fullscreenLoading" @click="openFullscreenLoading">
    Fullscreen Loading (3s)
  </px-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const fullscreenLoading = ref(false);

const openFullscreenLoading = () => {
  fullscreenLoading.value = true;
  setTimeout(() => {
    fullscreenLoading.value = false;
  }, 3000);
};
</script>

服务方式调用

Loading 还可以以服务方式调用。

<template>
  <px-button @click="openLoading">Service Loading (3s)</px-button>
</template>

<script setup lang="ts">
import { PxLoadingService } from 'sakana-element';

const openLoading = () => {
  const loading = PxLoadingService({
    lock: true,
    text: 'Loading...',
    fullscreen: true,
    background: 'rgba(0, 0, 0, 0.7)',
  });
  setTimeout(() => {
    loading.close();
  }, 3000);
};
</script>