82 lines
3.8 KiB
JSON
82 lines
3.8 KiB
JSON
{
|
||
"slug": "exceptionvariants",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 异常页：按 403/404/500/502 预置插图与文案，固定提供返回首页与重试两个动作。",
|
||
"usage": [
|
||
"defineProps 声明 type/emoji/title/desc 四个入参，两个固定按钮分别 emit(\"home\") 与 emit(\"retry\")，组件自身不做路由跳转（ExceptionVariants.vue3.vue:21）。",
|
||
"emoji、title、desc 三个 prop 都是「非空则覆盖预置」的语义，例如只改标题保留 404 的放大镜图标（ExceptionVariants.vue3.vue:31）。",
|
||
"两个动作按钮文案不可配置：主按钮固定「返回首页」emit(\"home\")，次按钮固定「重试」emit(\"retry\")（ExceptionVariants.vue3.vue:7）。",
|
||
"type 传未登记的值会退回到「⚠️ / 出错了」的兜底组合，不会报错也不会显示空页（ExceptionVariants.vue3.vue:29）。",
|
||
"本端没有 defineExpose，父组件只能通过 home/retry 事件做路由跳转或重新拉取（ExceptionVariants.vue3.vue:21）。"
|
||
],
|
||
"bestPractices": [
|
||
"事件不带载荷，需要把当前错误码一起上报时请在父组件闭包里捕获 :type 的值（ExceptionVariants.vue3.vue:8）。",
|
||
"两个按钮始终渲染，没有「只显示重试」的开关；只想留一个动作时需在外层用 CSS 隐藏并同时处理可访问性（ExceptionVariants.vue3.vue:7）。",
|
||
"预置描述偏向通用文案（如「服务器开小差了，请稍后再试。」），面向用户的错误页建议用 desc 覆盖成可执行的具体原因（ExceptionVariants.vue3.vue:27）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端 API 是四个展示型 props 加两个固定事件；两个按钮的文案与行为都不可配置，这是与「可定制异常页」预期的主要差距。",
|
||
"table": [
|
||
{
|
||
"name": "type",
|
||
"type": "String",
|
||
"desc": "403 | 404 | 500 | 502，默认 404；决定预置 emoji 与标题描述"
|
||
},
|
||
{
|
||
"name": "emoji",
|
||
"type": "String",
|
||
"desc": "覆盖预置插图字符，默认空串表示用预置值"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "覆盖预置标题，默认空串表示用预置值"
|
||
},
|
||
{
|
||
"name": "desc",
|
||
"type": "String",
|
||
"desc": "覆盖预置描述，默认空串表示用预置值"
|
||
},
|
||
{
|
||
"name": "home",
|
||
"type": "emit(no payload)",
|
||
"desc": "点击固定主按钮「返回首页」时触发"
|
||
},
|
||
{
|
||
"name": "retry",
|
||
"type": "emit(no payload)",
|
||
"desc": "点击固定次按钮「重试」时触发"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"插图是 emoji 文本，读屏会念出「锁」「放大镜」等词，建议由业务在根节点补 role=\"status\" 并用 aria-hidden 处理装饰性 emoji（ExceptionVariants.vue3.vue:3）。",
|
||
"页面标题是 div 而不是 h1，长页面里无法用标题导航定位到错误页主信息（ExceptionVariants.vue3.vue:4）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ExceptionVariants.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "exceptionvariants 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/ExceptionVariants.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"exceptionvariants-ex-1",
|
||
"exceptionvariants-ex-2",
|
||
"exceptionvariants-ex-3",
|
||
"exceptionvariants-ex-4"
|
||
],
|
||
"notes": [
|
||
"frameworks/ExceptionVariants.vue3.vue:21 — 两个固定动作事件，按钮文案写死在模板里",
|
||
"frameworks/ExceptionVariants.vue3.vue:23 — 按 type 取预置 emoji/标题/描述，prop 非空优先",
|
||
"frameworks/ExceptionVariants.vue3.vue:28 — 错误码预置表覆盖 403/404/500/502 四类"
|
||
]
|
||
}
|