89 lines
4.8 KiB
JSON
89 lines
4.8 KiB
JSON
{
|
||
"slug": "exceptionvariants",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端异常页组件：四个 String prop 定状态码与文案，两个固定按钮派发 home 与 retry 事件。",
|
||
"usage": [
|
||
"标签写法是 <KoleExceptionVariants type=\"403\" role=\"status\" @home=\"goHome\" @retry=\"retry\" />，事件名短且无载荷（ExceptionVariants.vue2.vue:7-8；示例 exceptionvariants-ex-1）。",
|
||
"props 只有四项：type（默认 '404'）、emoji、title、desc，全部 String 且后三项默认空串（ExceptionVariants.vue2.vue:17-20）。",
|
||
"覆盖逻辑集中在 computed resolved：this.emoji || p.emoji || '⚠️' 一类写法，先看 props、再看 PRESET[type]、最后兜底（ExceptionVariants.vue2.vue:23-36）。",
|
||
"两个按钮无 v-if，模板里恒定渲染「返回首页」（.primary）与「重试」；定制按钮数量需要改组件源码（ExceptionVariants.vue2.vue:6-9）。",
|
||
"事件在模板里就地派发：@click=\"$emit('home')\" 与 @click=\"$emit('retry')\"，没有中间方法（ExceptionVariants.vue2.vue:7-8）。",
|
||
"描述节点 v-if=\"resolved.desc\"，但预置表里四组描述都非空，只有显式传 desc=\"\" 且自定义场景时才可能不渲染（ExceptionVariants.vue2.vue:5,25-28）。"
|
||
],
|
||
"bestPractices": [
|
||
"本端无 v-model 与 .sync 目标，异常页是纯展示加事件通知，不要试图绑定可见性（ExceptionVariants.vue2.vue:7-8,14-21）。",
|
||
"示例里部分用法只传 type、不传 @home/@retry（如 500 场景），按钮点击会静默无反应；上线前确认两个事件都已接（示例 exceptionvariants-ex-3）。",
|
||
"把四组预置文案写在 computed 里的对象字面量每次求值都会重建，若页面同时渲染多个异常态，建议把表提到组件外（ExceptionVariants.vue2.vue:24-29）。",
|
||
"样式经 <style src=\"./ExceptionVariants.css\"> 引入，单文件拷走时必须一起带 CSS，否则插画与按钮高度都失效（ExceptionVariants.vue2.vue:40）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 API 载体是 props 加 emit：type 与三个文案 prop 决定展示，home / retry 两个无载荷事件把按钮点击交给父组件；组件无插槽，也没有任何双向绑定语义。",
|
||
"table": [
|
||
{
|
||
"name": "type",
|
||
"type": "String，默认 '404'",
|
||
"desc": "状态码键，取 403 / 404 / 500 / 502 之一"
|
||
},
|
||
{
|
||
"name": "emoji",
|
||
"type": "String，默认 ''",
|
||
"desc": "插画覆盖值，非空优先于预置"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String，默认 ''",
|
||
"desc": "标题覆盖值，兜底「出错了」"
|
||
},
|
||
{
|
||
"name": "desc",
|
||
"type": "String，默认 ''",
|
||
"desc": "描述覆盖值，解析为空时不渲染描述节点"
|
||
},
|
||
{
|
||
"name": "home",
|
||
"type": "事件，无载荷",
|
||
"desc": "点「返回首页」时派发"
|
||
},
|
||
{
|
||
"name": "retry",
|
||
"type": "事件，无载荷",
|
||
"desc": "点「重试」时派发"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"示例给组件写了 role=\"status\"；Vue 2 会把它作为未声明属性透传到根节点，因此状态语义能生效（ExceptionVariants.vue2.vue:2）。",
|
||
"两个按钮是原生 <button>，Tab 与回车可用；主次用实心与描边区分，不单靠色彩（ExceptionVariants.vue2.vue:7-8）。",
|
||
"插画为 emoji 文本节点，读屏器可能朗读其名称；纯装饰时建议由业务侧替换为 aria-hidden 节点（ExceptionVariants.vue2.vue:3）。",
|
||
"标题含状态码（如「502 网关错误」），异常类型不依赖颜色或插画即可读出（ExceptionVariants.vue2.vue:25-28）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ExceptionVariants.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "ExceptionVariants.vue2.vue —— 模板、四个 prop、resolved computed 与两个 $emit"
|
||
},
|
||
{
|
||
"file": "frameworks/ExceptionVariants.css",
|
||
"kind": "样式文件",
|
||
"desc": "ExceptionVariants.css —— <style src> 引入的 .kole-exception 系列样式"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"exceptionvariants-ex-1",
|
||
"exceptionvariants-ex-2",
|
||
"exceptionvariants-ex-3",
|
||
"exceptionvariants-ex-4"
|
||
],
|
||
"notes": [
|
||
"prop 声明：frameworks/ExceptionVariants.vue2.vue:17-20",
|
||
"resolved computed 与覆盖顺序：frameworks/ExceptionVariants.vue2.vue:23-36",
|
||
"两个事件就地派发：frameworks/ExceptionVariants.vue2.vue:7-8",
|
||
"描述 v-if：frameworks/ExceptionVariants.vue2.vue:5",
|
||
"样式引入：frameworks/ExceptionVariants.vue2.vue:40",
|
||
"role=\"status\" 属未声明属性透传，不算本组件 API，未写入 table。"
|
||
]
|
||
}
|