68 lines
3.2 KiB
JSON
68 lines
3.2 KiB
JSON
{
|
||
"slug": "loadingoverlay",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 加载遮罩：整屏或局部容器上盖一层转圈提示，支持深色底与自定义文案。",
|
||
"usage": [
|
||
"defineProps 声明 visible/text/inline/dark 四个入参，全程无 emit，显隐完全由父组件的响应式变量经 :visible 单向控制（LoadingOverlay.vue3.vue:9）。",
|
||
"局部遮罩要同时给 :inline=\"true\"，并把组件放进 position: relative 的父容器里，示例就是这么做的（LoadingOverlay.vue3.vue:2）。",
|
||
"text 传空串时只显示转圈，不保留空白文字行（LoadingOverlay.vue3.vue:4）。",
|
||
"dark 为真时附加 is-dark 类，用于在浅色内容上叠加半透明深底（LoadingOverlay.vue3.vue:2）。",
|
||
"组件不提供 loading 结束回调，也没有最小显示时长，遮挡时间完全由父组件控制 visible（LoadingOverlay.vue3.vue:10）。"
|
||
],
|
||
"bestPractices": [
|
||
"整屏遮罩与局部遮罩是同一个组件，差别只在 inline；混用时注意整屏模式下父容器的 transform 会让固定定位失效（LoadingOverlay.vue3.vue:2）。",
|
||
"遮罩层没有拦截键盘焦点，visible 期间 Tab 仍能走到后面的表单元素；需要严格阻塞时应同时给背景加 inert 或禁用（LoadingOverlay.vue3.vue:2）。",
|
||
"快速切换 visible 会反复创建销毁 DOM，若在高频场景使用建议在外层 v-show 或加过渡以避免闪烁（LoadingOverlay.vue3.vue:2）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端无 emit 与插槽：显隐、文案、深浅、局部或整屏四个维度都由 props 单向控制。",
|
||
"table": [
|
||
{
|
||
"name": "visible",
|
||
"type": "Boolean",
|
||
"desc": "是否显示遮罩，默认 false；为假时根节点不渲染"
|
||
},
|
||
{
|
||
"name": "text",
|
||
"type": "String",
|
||
"desc": "转圈下方的提示文案，默认空串即不渲染该行"
|
||
},
|
||
{
|
||
"name": "inline",
|
||
"type": "Boolean",
|
||
"desc": "是否作为局部遮罩（覆盖父容器而非全屏），默认 false"
|
||
},
|
||
{
|
||
"name": "dark",
|
||
"type": "Boolean",
|
||
"desc": "是否使用深色半透明底，默认 false"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"遮罩没有 role=\"status\" 或 aria-live，出现与消失对读屏完全静默；建议由业务在容器上补 aria-busy 与 aria-live（LoadingOverlay.vue3.vue:2）。",
|
||
"转圈元素是空 div，纯视觉反馈；text prop 是唯一的可读信息，遮罩期间务必传一句有意义的中文文案（LoadingOverlay.vue3.vue:3）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/LoadingOverlay.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "loadingoverlay 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/LoadingOverlay.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"loadingoverlay-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/LoadingOverlay.vue3.vue:10 — defineProps 声明 visible/text/inline/dark",
|
||
"frameworks/LoadingOverlay.vue3.vue:2 — 两个布尔开关只映射到类名"
|
||
]
|
||
}
|