93 lines
4.3 KiB
JSON
93 lines
4.3 KiB
JSON
{
|
||
"slug": "cascader",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生 H5 级联选择器：data-cascader 挂载，data-lv 与 data-val 定位某列某节点，路径以 JSON 字符串落库。",
|
||
"usage": [
|
||
"同一个页面可以放多个实例，用 data-multiple=true / false 在标记上决定多选还是单选，脚本读 root.dataset.multiple 分派。",
|
||
"列里的每个节点由脚本生成带 data-lv 与 data-val 的 .kole-cascader-opt，点击时把两个值合成一条路径去查节点。",
|
||
"搜索结果行另用 data-path 存整条路径的 JSON 字符串，点击时 JSON.parse 还原，所以路径元素里不能有非 JSON 值。",
|
||
"搜索容器是脚本动态插入的 .kole-cascader-search，展开时 display 切 block 并主动 focus 输入框，收起时置 none。",
|
||
"选中态用 is-active 表示当前列高亮、is-checked 表示叶子已勾选，两个类名可同时出现在同一节点上。",
|
||
"点击外部收起在 document 上监听，用 root.contains 判断，同时清空搜索词并把路径结果与搜索框一起复位。"
|
||
],
|
||
"bestPractices": [
|
||
"节点值只从 dataset 取，而 dataset 全部是字符串，做成数字 id 的选项要在脚本里自行转回 Number 再比较。",
|
||
"trigger 的 aria-expanded 静态写死 false，脚本只改样式类，键盘与读屏用户拿不到真实展开态。",
|
||
"搜索框由脚本 append 到 root，重复初始化同一容器会累积多个 .kole-cascader-search 节点。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "HTML 端无 props，载体为：data-cascader 与 data-multiple 描述实例、data-lv 与 data-val 描述列内节点、data-path 描述搜索结果、kole-* 与 is-* 类名描述结构与状态。",
|
||
"table": [
|
||
{
|
||
"name": "data-cascader",
|
||
"type": "存在即挂载",
|
||
"desc": "初始化钩子，脚本遍历页面所有该属性的容器建级联实例"
|
||
},
|
||
{
|
||
"name": "data-multiple",
|
||
"type": "true / false 字符串",
|
||
"desc": "决定单选或多次模式，脚本比较 dataset.multiple 后分派渲染"
|
||
},
|
||
{
|
||
"name": "data-lv",
|
||
"type": "层级序号",
|
||
"desc": "落在 .kole-cascader-opt 上，标明该节点属于第几列"
|
||
},
|
||
{
|
||
"name": "data-val",
|
||
"type": "节点 value 字符串",
|
||
"desc": "落在 .kole-cascader-opt 上，与 data-lv 一起定位被点击的节点"
|
||
},
|
||
{
|
||
"name": "data-path",
|
||
"type": "路径的 JSON 字符串",
|
||
"desc": "落在 .kole-cascader-result 上，点击时解析还原完整路径"
|
||
},
|
||
{
|
||
"name": "kole-cascader-col",
|
||
"type": "类名",
|
||
"desc": "级联的一列，列内承载该层全部节点"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "状态类",
|
||
"desc": "当前被展开到的那一级节点高亮"
|
||
},
|
||
{
|
||
"name": "is-checked",
|
||
"type": "状态类",
|
||
"desc": "多选模式下已选中的叶子节点"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"标记容器是空 div，语义来自脚本写入 trigger 的 role=button 与 aria-haspopup=listbox。",
|
||
"trigger 虽有 tabindex=0，但未绑定键盘事件，回车不能展开，方向键无法在列间移动。",
|
||
"列内节点是 div 加 click，缺 role=treeitem 与 aria-expanded，读屏器无法感知层级与展开关系。",
|
||
"搜索结果列表只是 div 堆叠，没有 listbox / option 语义，匹配条数也不播报。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Cascader.html",
|
||
"kind": "HTML 实现",
|
||
"desc": "Cascader.html —— 本端实现全文，含结构与交互逻辑"
|
||
},
|
||
{
|
||
"file": "frameworks/Cascader.css",
|
||
"kind": "样式文件",
|
||
"desc": "frameworks/Cascader.css —— 组件全部 kole-* 类名与 is-* 状态类的样式定义"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"cascader-ex-1",
|
||
"cascader-ex-2"
|
||
],
|
||
"notes": [
|
||
"两个实例的挂载与 data-multiple 见 frameworks/Cascader.html:24 与第 29 行，批量初始化见第 193 行。",
|
||
"data-lv 与 data-val 生成见 frameworks/Cascader.html:136，data-path 生成见第 105 行。",
|
||
"搜索框插入与 focus 见 frameworks/Cascader.html:175-185，点击外部收起见第 187-189 行。"
|
||
]
|
||
}
|