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

属性名	类型	默认值	说明
`loading`	`boolean`	`false`	是否显示
`fullscreen`	`boolean`	`false`	是否全屏（Teleport 到 body）
`text`	`string`	`''`	文案
`spinnerSize`	`number`	`18`	spinner 尺寸
`background`	`string`	-	背景遮罩色