组件/LoadingOverlay 加载遮罩
自 1.0.0BETA

LoadingOverlay 加载遮罩

用于在内容区域或全屏展示加载遮罩。

该页面由 AI 迁移生成,请谨慎使用

内容已迁移完成,但仍建议结合源码和人工评审结果使用。

LoadingOverlay 加载遮罩

用于在内容区域或全屏展示加载遮罩。

import { ref } from 'vue' const loading = ref(false)

容器内遮罩

LoadingOverlay (container)

示例即将加载...
<template>
  <TxButton @click="loading = !loading">Toggle</TxButton>
  <TxLoadingOverlay :loading="loading" text="Loading...">
    <div style="height: 120px; display: flex; align-items: center; justify-content: center;">Content</div>
  </TxLoadingOverlay>
</template>

全屏遮罩

LoadingOverlay (fullscreen)

示例即将加载...
<template>
  <TxButton @click="loading = !loading">Toggle</TxButton>
  <TxLoadingOverlay fullscreen :loading="loading" text="Loading..." />
</template>

API

Props

属性名类型默认值说明
loadingbooleanfalse是否显示
fullscreenbooleanfalse是否全屏(Teleport 到 body)
textstring''文案
spinnerSizenumber18spinner 尺寸
backgroundstring-背景遮罩色