Loading

全屏加载遮罩系统，提供：

• Loading 组件：z-index: 60 的全屏遮罩，基于 Dialog 实现
• LoadingIcon 组件：独立的 spinner 小图标，用于按钮、行内等场景
• loading.show() / loading.update() / loading.close()：命令式 API，需要挂载一次 <DialogOpener>（Nuxt 项目自动处理）

LoadingIcon

默认

默认尺寸 8px、间距 12px 的三点 spinner。

<script setup lang="ts">
import { LoadingIcon } from '@tripo3d/design';
</script>

<template>
  <LoadingIcon />
</template>

自定义尺寸

<LoadingIcon :size="6" :gap="8" />
<LoadingIcon :size="12" :gap="16" />
<LoadingIcon :size="16" :gap="20" />

单色模式

monochrome 使用灰色，便于放在彩色背景之上。

<LoadingIcon monochrome />
<LoadingIcon :size="12" :gap="16" monochrome />

命令式全屏 Loading

命令式 API 会挂起整个页面交互，因此这里仅展示代码。实际使用时需要在应用根部挂载一次 <DialogOpener>：

<!-- App.vue -->
<script setup lang="ts">
import { DialogOpener } from '@tripo3d/design';
</script>

<template>
  <RouterView />
  <DialogOpener />
</template>

之后即可在任意地方调用：

<script setup lang="ts">
import { loading } from '@tripo3d/design';

async function run() {
  const key = loading.show();
  try {
    await doHeavyTask();
  }
  finally {
    loading.close(key);
  }
}
</script>

挂载 DialogOpener

命令式 Loading 与命令式 Dialog 共用同一个挂载点。Nuxt 项目使用 @tripo3d/design/nuxt 模块会自动注入；Vue 3 项目需要在根布局中手动挂载一次。

声明式 Loading

也可以直接把 <Loading /> 放进模板（基于 Dialog，默认 modal）：

<script setup lang="ts">
import { Loading } from '@tripo3d/design';
</script>

<template>
  <Loading>
    模型生成中，请稍候...
  </Loading>
</template>

API

LoadingIcon Props

名称	类型	默认值	说明
size	number	8	单个点的尺寸（px）
gap	number	12	点之间的间距（px）
monochrome	boolean	false	使用单色灰版本
class	string	—	容器 class

Loading Slots

插槽	作用域	说明
default	—	附加文字或内容，显示在 spinner 下方

loading 命令式 API

方法	签名	说明
loading.show	(props?) => key	打开一个全屏 loading，返回可用于 update/close 的 key
loading.update	(key, props) => void	更新已打开 loading 的 props
loading.close	(key) => void	关闭 loading