92 lines
3.7 KiB
JSON
92 lines
3.7 KiB
JSON
{
|
||
"slug": "emptypro",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 空状态：按 type 预置图标与文案，可挂主要与次要两个操作按钮。",
|
||
"usage": [
|
||
"defineProps 的 icon/title/desc 三个入参按「非空则覆盖、否则取 type 预置」解析，覆盖逻辑集中在 resolved computed 里（EmptyPro.vue3.vue:25）。",
|
||
"icon、title、desc 三个 prop 都按「传了就用、没传用预置」的优先级解析，可以只覆盖标题保留预置图标（EmptyPro.vue3.vue:33）。",
|
||
"actionText 与 secondaryText 分别对应主要与次要按钮，两者都为空时整个按钮区不渲染（EmptyPro.vue3.vue:6）。",
|
||
"点击主要按钮 emit(\"action\")、次要按钮 emit(\"secondary\")，两个事件都不带载荷（EmptyPro.vue3.vue:7）。",
|
||
"预置文案写死在 resolved computed 里，想改描述只能通过 desc prop 覆盖（EmptyPro.vue3.vue:28）。"
|
||
],
|
||
"bestPractices": [
|
||
"type 传了未登记的值会退回到「⚠️ / 出错了」的兜底组合，而不是 empty 那套，容易误判为空数据场景（EmptyPro.vue3.vue:31）。",
|
||
"按钮文字长度没有约束，中文长文案会把按钮区撑开；多操作场景建议只保留一个主要动作（EmptyPro.vue3.vue:6）。",
|
||
"事件不带载荷，需要在点击时拿到上下文（如当前筛选条件）的，请在父组件闭包里捕获（EmptyPro.vue3.vue:7）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端是「四套预置 + 三个覆盖点」的 props 组件，两个无载荷事件分别对应主要与次要操作；没有插槽扩展位。",
|
||
"table": [
|
||
{
|
||
"name": "type",
|
||
"type": "String",
|
||
"desc": "empty | permission | search | error，默认 empty；决定预置图标与文案"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"type": "String",
|
||
"desc": "覆盖预置图标，默认空串表示用 type 预置值"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "覆盖预置标题，默认空串表示用 type 预置值"
|
||
},
|
||
{
|
||
"name": "desc",
|
||
"type": "String",
|
||
"desc": "覆盖预置描述，默认空串表示用 type 预置值"
|
||
},
|
||
{
|
||
"name": "actionText",
|
||
"type": "String",
|
||
"desc": "主要按钮文案，默认空串即不渲染该按钮"
|
||
},
|
||
{
|
||
"name": "secondaryText",
|
||
"type": "String",
|
||
"desc": "次要按钮文案，默认空串即不渲染该按钮"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"type": "emit(no payload)",
|
||
"desc": "点击主要按钮时触发"
|
||
},
|
||
{
|
||
"name": "secondary",
|
||
"type": "emit(no payload)",
|
||
"desc": "点击次要按钮时触发"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"根节点没有 role=\"status\" 或 aria-live，示例中由使用方手写 role 补语义；组件自身不提供（EmptyPro.vue3.vue:2）。",
|
||
"空状态图标是 emoji 文本，读屏会把它读成「邮件箱」等词，建议业务侧补 aria-hidden 或改用图标组件（EmptyPro.vue3.vue:3）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/EmptyPro.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "emptypro 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/EmptyPro.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"emptypro-ex-1",
|
||
"emptypro-ex-2",
|
||
"emptypro-ex-3",
|
||
"emptypro-ex-4"
|
||
],
|
||
"notes": [
|
||
"frameworks/EmptyPro.vue3.vue:20 — defineProps 的六个展示型入参",
|
||
"frameworks/EmptyPro.vue3.vue:23 — 两个无载荷事件对应主次按钮",
|
||
"frameworks/EmptyPro.vue3.vue:25 — 按 type 取预置值，prop 非空时优先"
|
||
]
|
||
}
|