76 lines
3.3 KiB
JSON
76 lines
3.3 KiB
JSON
{
|
||
"slug": "badge",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 标记：展示未读数、状态点或紧贴对象的小红点。",
|
||
"usage": [
|
||
"本端是 surface 桩：defineProps 声明 count/status/variant 三项，模板只消费 props.title 与默认插槽，计数与状态点当前都不会渲染（Badge.vue3.vue:2）。",
|
||
"默认插槽用于承载被标记的对象，桩模板把它渲染在描述文字之后（Badge.vue3.vue:2）。",
|
||
"title 可覆盖占位标题「标记 Badge」，便于在页面上识别该组件（Badge.vue3.vue:2）。",
|
||
"本端 defineEmits 为空数组，点击或数值变化都不会通知父组件（Badge.vue3.vue:12）。",
|
||
"没有 max 截断（如 99+）或 showZero 之类的显示控制项（Badge.vue3.vue:7）。"
|
||
],
|
||
"bestPractices": [
|
||
"这是 surface 桩：模板只消费 props.title，count / status / variant 声明后都没有参与渲染，当前不会看到数字或状态点（Badge.vue3.vue:2）。",
|
||
"因为不消费 count，未读数不会显示；需要真实标记建议先用外层 span 加 CSS 实现，等实现补齐（Badge.vue3.vue:8）。",
|
||
"插槽内容的定位与偏移也由桩样式决定，不要在这里做角标贴近父元素的布局设计（Badge.vue3.vue:2）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "既有实现缺口：Badge.vue3.vue 是 surface 桩，模板只消费 props.title；count/status/variant 声明未消费，无事件无计数显示。",
|
||
"table": [
|
||
{
|
||
"name": "count",
|
||
"type": "Number",
|
||
"desc": "数量，默认 8；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "status",
|
||
"type": "String",
|
||
"desc": "状态，默认 error；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "variant",
|
||
"type": "String",
|
||
"desc": "变体，默认 dot；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题文本，默认「标记 Badge」；模板实际消费的字段"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "slot(default)",
|
||
"desc": "默认插槽，用于承载被标记的对象"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"当前实现不输出任何数字文本，读屏无法获知未读数量；接入后应为徽标补 aria-label 或让它进入可读文本流（Badge.vue3.vue:2）。",
|
||
"纯视觉的状态点若最终实现为装饰元素，需要加 aria-hidden 并由父元素文字承担语义（Badge.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Badge.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "badge 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Badge.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"badge-ex-1",
|
||
"badge-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Badge.vue3.vue:10 — 声明了 count/status/variant",
|
||
"frameworks/Badge.vue3.vue:12 — 空事件数组，无事件",
|
||
"frameworks/Badge.vue3.vue:2 — 模板仅消费 props.title（surface 桩）",
|
||
"实现缺口 frameworks/Badge.vue3.vue:12 — 既有实现缺口：surface 桩，模板只消费 props.title，count/status/variant 声明后未被消费"
|
||
]
|
||
}
|