65 lines
2.6 KiB
JSON
65 lines
2.6 KiB
JSON
{
|
||
"slug": "loadingoverlay",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 loadingoverlay：visible 一票控制显隐，inline 与 dark 换类名，没有任何事件与插槽。",
|
||
"usage": [
|
||
"`:visible` 是根 div 的 v-if（第 2 行），为假时整块遮罩与转圈都不进 DOM，不需要额外的 show 状态。",
|
||
"`:inline` 与 `:dark` 换成 `:class=\"{ 'is-inline': inline, 'is-dark': dark }\"`（第 2 行），局部遮罩与深色底靠这两个类。",
|
||
"`:text` 为空时那一行 .kole-loading-text 不渲染（第 4 行），想只要转圈不要文字就不传 text 或传空串。"
|
||
],
|
||
"bestPractices": [
|
||
"组件没有完成事件，转圈只表示状态；加载结束由父组件把 visible 置回 false，不要等组件自己消失。",
|
||
"局部遮罩要放在定位元素内部才能贴住内容区（绝对定位于最近定位祖先），放在页面顶层就会铺满全屏。"
|
||
],
|
||
"a11y": [
|
||
"遮罩没有 role=\"status\" 也没有 aria-live，加载开始与结束都不会被播报，需要提醒时在外部补 live 区域。",
|
||
"转圈是纯 CSS 动画的 div，通常设在 prefers-reduced-motion 下停用，接入时确认样式侧是否已处理。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 4 项（visible/text/inline/dark，frameworks/LoadingOverlay.vue2.vue:11-16）：无事件、无插槽，全部效果都通过 :class 与 v-if 落地。",
|
||
"table": [
|
||
{
|
||
"name": "dark",
|
||
"type": "Boolean",
|
||
"desc": "是否深色外观（frameworks/LoadingOverlay.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "inline",
|
||
"type": "Boolean",
|
||
"desc": "是否行内展示（frameworks/LoadingOverlay.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "text",
|
||
"type": "String",
|
||
"desc": "文本（契约：可配置文案）（frameworks/LoadingOverlay.vue2.vue:4）"
|
||
},
|
||
{
|
||
"name": "visible",
|
||
"type": "Boolean",
|
||
"desc": "是否可见（frameworks/LoadingOverlay.vue2.vue:2）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/LoadingOverlay.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/LoadingOverlay.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"loadingoverlay-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/LoadingOverlay.vue2.vue:12-15；模板第 2、4 行消费 visible/inline/dark/text。",
|
||
"全文无 $emit 与 <slot>，因此交互只能靠 :visible 单向驱动。"
|
||
]
|
||
}
|