Loading 加载遮罩
全屏或局部加载遮罩组件。显示旋转加载动画和可配置的提示文本，支持自定义遮罩背景色。
基础用法
局部加载
vue
<template>
<div style="position: relative; min-height: 200px">
<Loading v-if="loading" text="数据加载中..." />
<div v-else>
<!-- 内容区域 -->
</div>
</div>
</template>全屏加载
vue
<template>
<Loading :fullscreen="true" text="正在提交..." background="0, 0, 0, 0.5" v-if="submitting" />
</template>Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
fullscreen | Boolean | false | 是否全屏显示。true 时使用固定定位铺满视口，并锁定 body 滚动 |
background | String | '0, 0, 0, 0.7' | 遮罩背景色，RGBA 值以逗号分隔 |
text | String | '加载中...' | 加载提示文本 |
color | String | '#ffffff' | 文本颜色 |
fontSize | Number | 14 | 文本字号（px） |
注意事项
- 局部加载时需要父容器设置
position: relative确保遮罩正确定位 - 全屏模式会自动给
<body>添加overflow: hidden，卸载时移除 - 组件本身不控制显隐，需在父组件中通过
v-if控制