{
  "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 四类"
  ]
}