71 lines
3.7 KiB
JSON
71 lines
3.7 KiB
JSON
{
|
||
"slug": "quicknav",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 端快捷入口宫格：items 渲染图标加文字，点击派发 select 带出整项。",
|
||
"usage": [
|
||
"defineProps 只声明 items 一个 prop（第 16-30 行），默认内置八个入口（数据看板、用户管理……）连 icon 一起给全，不传也能渲染。",
|
||
"defineEmits(['select']) 声明唯一事件，点击整项时 emit('select', it) 把该项对象原样带出（第 7、31 行），父级用 @select 接。",
|
||
"每项只读 it.icon 与 it.label 两个字段，分别渲染进 .kole-quicknav-icon 与 .kole-quicknav-label（第 9-10 行），字段名要与默认数据对齐。",
|
||
"该端没有双向绑定：items 只读、没有选中态 prop、也没有 update:xxx 事件（第 16-31 行），模板上写 v-model 无对象可绑。",
|
||
"渲染是扁平一层 v-for（第 3-11 行），没有子项与分组，要分组得在父级摆多个组件。"
|
||
],
|
||
"bestPractices": [
|
||
"v-for 的 key 用的是下标 i（第 5 行），items 顺序变化会错位复用，建议在父级把顺序固定好再传。",
|
||
"派发的是整个 item 对象而不是下标或 key（第 7 行），父级在 @select 里按 it.label 或自定义字段分支最直接。",
|
||
"组件不维护选中态，宫格高亮要父级自己加样式或在外面再包一层，:class 无法从组件内部触发。"
|
||
],
|
||
"a11y": [
|
||
"条目是绑定 @click 的普通 div（第 3-8 行），没有 tabindex、role 与 keydown，键盘既不能聚焦也不能激活。",
|
||
"图标是 emoji 文本（第 9 行），与 .kole-quicknav-label 一起被读出，纯装饰的 emoji 会让读屏器多念一遍名字。",
|
||
"根容器只是一个 .kole-quicknav 的 div（第 2 行），没有 nav 或列表地标语义，整块对读屏器是普通文本流。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端真实 API 只有 items 这个 prop 与 select 这个 emit（表内另有 default、type 两行，来自对默认数组对象字段的解析，不是 prop）。",
|
||
"table": [
|
||
{
|
||
"name": "default",
|
||
"type": "属性",
|
||
"desc": "由 items 默认值写法解析出的字段片段，不是对外 prop；本端真正的 prop 只有 items（frameworks/QuickNav.vue3.vue:16-30）"
|
||
},
|
||
{
|
||
"name": "items",
|
||
"type": "Array",
|
||
"desc": "数据项（frameworks/QuickNav.vue3.vue:4）"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "属性",
|
||
"desc": "同上，解析默认数组对象时残留的片段，实现未声明也未消费该 prop（frameworks/QuickNav.vue3.vue:17-29）"
|
||
},
|
||
{
|
||
"name": "select",
|
||
"type": "(val: any) => void",
|
||
"desc": "选中某一项时触发（frameworks/QuickNav.vue3.vue:7）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/QuickNav.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/QuickNav.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"quicknav-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/QuickNav.vue3.vue:16-30，默认八条 { icon, label } 数据在第 19-28 行。",
|
||
"emit 声明见 frameworks/QuickNav.vue3.vue:31，派发点在第 7 行，参数是整项对象。",
|
||
"facts 的 consumedApi.props 含 default 与 type，实为默认数组里的字段名被解析进来（源码第 19-20 行），该端真正的 prop 只有 items。",
|
||
"全文无 tabindex / role / keydown（frameworks/QuickNav.vue3.vue:1-32），键盘不可达，已记入 a11y。"
|
||
]
|
||
}
|