66 lines
3.0 KiB
JSON
66 lines
3.0 KiB
JSON
{
|
||
"slug": "badge",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 badge 是 surface 桩：count/status/variant 三个 props 都声明了，模板却只输出标题与默认插槽，角标数字不显示。",
|
||
"usage": [
|
||
"`:count` 不会出现在模板任何插值里，传 8 或 120 都不会渲染出数字，要显示计数得自己在默认插槽里写。",
|
||
"`:variant` 与 `:status` 只进 props 声明，模板第 2 行的 :class 是写死的 kole-badge-surface，没有 is-* 之类的状态类。",
|
||
"模板取的 `{{ title || '标记 Badge' }}` 里 title 未在 props 声明，因此这段标题永远是回退值，传参改不了；角标内容只能走默认插槽。"
|
||
],
|
||
"bestPractices": [
|
||
"这份实现是外壳：把一个或多个 <KoleBadge> 放进默认插槽才能看到内容，空标签进去就是一片空白。",
|
||
"props 声明仍在，跨端照搬别人的 :count 用法不会报错也不会生效，属于静默无效，排查时先看模板有没有绑定。"
|
||
],
|
||
"a11y": [
|
||
"桩模板里没有 role=\"status\" 也没有 aria-live，未读数变化不会自动播报，需要无障碍播报时在插槽里自己补。",
|
||
"当前输出没有可聚焦元素；若插槽里放的是角标数字，纯装饰性数字建议配 aria-hidden 或作为文本的一部分。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体形式上是 props 块的 3 个声明（count/status/variant，frameworks/Badge.vue2.vue:8-12），实际渲染只走模板的默认插槽，三者均未被消费。",
|
||
"table": [
|
||
{
|
||
"name": "count",
|
||
"type": "Number",
|
||
"desc": "数量（frameworks/Badge.vue2.vue:9）"
|
||
},
|
||
{
|
||
"name": "status",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 error，注释「状态」），模板未做任何绑定（frameworks/Badge.vue2.vue:10）"
|
||
},
|
||
{
|
||
"name": "variant",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 dot，注释「变体」），模板未做任何绑定（frameworks/Badge.vue2.vue:11）"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "插槽",
|
||
"desc": "默认插槽（组件文本或主体内容）（frameworks/Badge.vue2.vue:6）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Badge.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Badge.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"badge-ex-1",
|
||
"badge-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/Badge.vue2.vue:9-11，模板仅第 2 行，动态绑定只有写死的类名，没有 :count / :status / :variant。",
|
||
"第 2 行出现的 title 是未声明标识符（props 块里没有），因此 {{ title || '标记 Badge' }} 恒取回退文案。"
|
||
]
|
||
}
|