103 lines
4.8 KiB
JSON
103 lines
4.8 KiB
JSON
{
|
||
"slug": "enhancedtabnav",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生增强页签：点、右键菜单、拖拽排序三种交互共用一份 render 重建的列表。",
|
||
"usage": [
|
||
"页签壳是 .kole-tabs-enh-tab（带 role=\"tab\"、tabindex=\"0\"、draggable=\"true\"），里面按顺序放 .kole-dot（未保存标记）、.kole-tabs-enh-text 与 .kole-tabs-enh-close。",
|
||
"每个页签带三个 data-*：data-id 标识、data-idx 记录序号、关闭按钮上的 data-close 携带 id。",
|
||
"点击用 bar 上的事件委托：先判断 closest(\"[data-close]\") 走关闭，否则 closest(\".kole-tabs-enh-tab\") 切 activeId。",
|
||
"关闭后活动页签回退规则写死为 tabs[Math.max(0, idx - 1)].id，即关掉当前页签时选中它左边那个。",
|
||
"右键菜单是脚本动态创建的 .kole-tabs-enh-menu（含 data-act 的关闭 / 其他 / 全部三项），点击外部由 document 上的 click 加 menu.contains 判断来收起。",
|
||
"拖拽排序靠 dragstart 记 dragId、dragover 里 preventDefault、drop 里对 tabs 数组 splice 后重渲染，顺序不在 DOM 而在这个数组。"
|
||
],
|
||
"bestPractices": [
|
||
"页签数组是唯一状态源，所有交互都以 tabs 数组收尾再 render；直接改 DOM 会在下次重渲染时被覆盖。",
|
||
"菜单项 data-act 三个分支里「关闭其他」与「关闭全部」都不判 tabs.length，可能把列表清空到零页签。",
|
||
"drop 里对 from === to 做了提前 return，改动排序逻辑时别删这个判断。"
|
||
],
|
||
"a11y": [
|
||
"页签声明 role=\"tab\" 但没有外层 role=\"tablist\"，面板也没有 role=\"tabpanel\" 与 aria-controls 配对。",
|
||
"role=\"tab\" 元素只有 click 与 contextmenu 监听，没有方向键与 Enter 处理，键盘切不了页签。",
|
||
"关闭按钮 .kole-tabs-enh-close 是 span 而非 button，没有 aria-label，键盘无法聚焦关闭。",
|
||
"未保存标记 .kole-dot 只有一个小圆点，没有文本或 aria-label 表示「有未保存修改」。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端一个 render() 重建全部页签，状态由 data-id / data-idx / data-close 钩子回传，交互（点击、右键菜单、拖拽排序）全部由页内脚本的事件委托实现，activeId 与 tabs 数组是唯一状态。",
|
||
"table": [
|
||
{
|
||
"name": "activeId",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:32）。"
|
||
},
|
||
{
|
||
"name": "kole-demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:15）。"
|
||
},
|
||
{
|
||
"name": "kole-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-dot",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:40）。"
|
||
},
|
||
{
|
||
"name": "kole-h2",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:12）。"
|
||
},
|
||
{
|
||
"name": "kole-page",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:11）。"
|
||
},
|
||
{
|
||
"name": "kole-tabs-enh",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:16）。"
|
||
},
|
||
{
|
||
"name": "kole-tabs-enh-bar",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:17）。"
|
||
},
|
||
{
|
||
"name": "kole-tabs-enh-close",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:42）。"
|
||
},
|
||
{
|
||
"name": "kole-tabs-enh-hint",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/EnhancedTabNav.html:20）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/EnhancedTabNav.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/EnhancedTabNav.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"enhancedtabnav-ex-1"
|
||
],
|
||
"notes": [
|
||
"页签模板与三个 data-* 见（frameworks/EnhancedTabNav.html:39-42）。",
|
||
"点击委托与关闭分支见（frameworks/EnhancedTabNav.html:48-53），活动页签回退规则见（frameworks/EnhancedTabNav.html:65）。",
|
||
"右键菜单与 data-act 分支见（frameworks/EnhancedTabNav.html:68-81），点外收起见（frameworks/EnhancedTabNav.html:85）。",
|
||
"拖拽三段监听见（frameworks/EnhancedTabNav.html:89-103）。"
|
||
]
|
||
}
|