71 lines
2.9 KiB
JSON
71 lines
2.9 KiB
JSON
{
|
||
"slug": "mixednavigation",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 混合导航，方向常量为 mixed 时同时渲染顶部一级条与侧边二级栏。",
|
||
"usage": [
|
||
"Vue 2 端 direction 为 mixed 时，点击一级项会同时把它记为 active 并展开其子项到侧边栏。",
|
||
"侧边栏内容来自 sideItems 计算属性：取当前激活一级项（或第一项）的 children。",
|
||
"mixed 方向下父项右侧不渲染 › 箭头，父项本身充当一级切换器。",
|
||
"对外 API 与另外两个菜单相同：items、activeKey 与两个事件。"
|
||
],
|
||
"bestPractices": [
|
||
"点击一级项（有子项）时只更新内部 active，不派发 change，真正的路由跳转应由叶子触发。",
|
||
"sideItems 在一级项没有 children 时返回空数组，侧边栏会渲染成空容器，需要业务侧保证数据完整。",
|
||
"三个菜单组件的 items 结构一致，切换方向只需换组件而不是改数据结构。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 2 个 prop、2 个事件；mixed 方向的侧边栏数据由 computed 派生而非 prop 传入。",
|
||
"table": [
|
||
{
|
||
"name": "items",
|
||
"type": "Array，默认空数组",
|
||
"desc": "菜单树，一级项可带 children 作为二级栏数据"
|
||
},
|
||
{
|
||
"name": "activeKey",
|
||
"type": "String，默认空串",
|
||
"desc": "当前选中的叶子 key"
|
||
},
|
||
{
|
||
"name": "update:activeKey",
|
||
"type": "事件，参数为被选中的 key",
|
||
"desc": "叶子选中时派发，供 .sync 回写"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "事件，参数为被选中的 key",
|
||
"desc": "与 update:activeKey 同时派发"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"根节点为 nav 带 aria-label=\"主菜单\"，上下两块都在同一个导航地标内。",
|
||
"所有可点项都带 role=\"menuitem\" 与 tabindex=\"0\"，键盘可聚焦。",
|
||
"两段结构之间没有分组标记（如 aria-labelledby），读屏器只能靠 DOM 顺序区分一级与二级。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/MixedNavigation.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "MixedNavigation.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/MixedNavigation.css",
|
||
"kind": "样式文件",
|
||
"desc": "MixedNavigation.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"mixednavigation-ex-3",
|
||
"mixednavigation-ex-1",
|
||
"mixednavigation-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/MixedNavigation.vue2.vue:59-62。",
|
||
"方向常量见 frameworks/MixedNavigation.vue2.vue:54 的 FAMILY_DIRECTION = 'mixed'。",
|
||
"一级点击只改内部 active 见 frameworks/MixedNavigation.vue2.vue:101-105，sideItems 计算属性在第 76-80 行。"
|
||
]
|
||
}
|