117 lines
4.6 KiB
JSON
117 lines
4.6 KiB
JSON
{
|
||
"slug": "mention",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 @ 提及输入：textarea 输入 @ 弹面板，键盘与鼠标共用同一套 active 索引。",
|
||
"usage": [
|
||
"容器写 .kole-mention，输入区是 .kole-mention-area 里的 textarea（.kole-mention-input），候选面板是 .kole-mention-panel。",
|
||
"面板条目由脚本拼字符串生成，含 .kole-mention-avatar、.kole-mention-name 与 .kole-mention-dept，选中态加 .is-active 类。",
|
||
"触发条件与框架端一致：光标前最后一个 @ 且前面是空白或行首，输入事件里重新计算并决定面板是否显示。",
|
||
"键盘处理写在 textarea 的 keydown 里：上下键改 active 索引、Enter 把 @ 补全成 @姓名 、Escape 隐藏面板。",
|
||
"已提及列表渲染成 .kole-mention-chip，chip 内的 <b data-n=\"姓名\">×</b> 负责移除，用事件委托读 data-n。"
|
||
],
|
||
"bestPractices": [
|
||
"active 索引要在每次重新渲染前重置或夹取，否则过滤后索引越界会取到 undefined 的候选人。",
|
||
"面板显隐用 style.display 而不是 hidden 属性（示例即如此），补 aria-expanded 时注意别只改一种状态。",
|
||
"插入文本用 input.value 拼接后要把光标移到插入位置，示例插入后重新 focus，否则光标会跳到末尾。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-mention 输入区、面板、条目、chip 与 is-active 状态类）加 data-i / data-n 值与身份钩子，交互全部由页内脚本实现。",
|
||
"table": [
|
||
{
|
||
"name": "kole-mention",
|
||
"type": "基础类名",
|
||
"desc": "提及输入根容器，脚本按它定位面板与 chip 区"
|
||
},
|
||
{
|
||
"name": "kole-mention-area",
|
||
"type": "结构类名",
|
||
"desc": "输入区容器"
|
||
},
|
||
{
|
||
"name": "kole-mention-input",
|
||
"type": "结构类名",
|
||
"desc": "原生 textarea，键盘处理挂在它上面"
|
||
},
|
||
{
|
||
"name": "kole-mention-panel",
|
||
"type": "结构类名",
|
||
"desc": "候选面板，靠 style.display 显隐"
|
||
},
|
||
{
|
||
"name": "kole-mention-item",
|
||
"type": "结构类名",
|
||
"desc": "候选条目，可叠加 is-active"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "状态类名",
|
||
"desc": "键盘当前选中的候选条目"
|
||
},
|
||
{
|
||
"name": "kole-mention-avatar",
|
||
"type": "结构类名",
|
||
"desc": "候选条目头像（取姓名首字）"
|
||
},
|
||
{
|
||
"name": "kole-mention-name",
|
||
"type": "结构类名",
|
||
"desc": "候选人姓名"
|
||
},
|
||
{
|
||
"name": "kole-mention-dept",
|
||
"type": "结构类名",
|
||
"desc": "候选人部门"
|
||
},
|
||
{
|
||
"name": "kole-mention-chips",
|
||
"type": "结构类名",
|
||
"desc": "已提及人员列表容器"
|
||
},
|
||
{
|
||
"name": "kole-mention-chip",
|
||
"type": "结构类名",
|
||
"desc": "单个已提及人员标签"
|
||
},
|
||
{
|
||
"name": "data-i",
|
||
"type": "data-* 钩子",
|
||
"desc": "候选条目索引，点击时据此取用户"
|
||
},
|
||
{
|
||
"name": "data-n",
|
||
"type": "data-* 钩子",
|
||
"desc": "chip 上记录的姓名，用于移除"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"输入区是原生 textarea，键盘可达；候选面板没有 role=\"listbox\" 与 aria-activedescendant。",
|
||
"面板弹出与收起没有 aria-live 或 aria-expanded 通知，读屏器感知不到候选列表状态变化。",
|
||
"上下键与 Enter 已实现，但当前选中项只靠 .is-active 类表达，读屏器读不出谁被选中。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Mention.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Mention.html —— 纯 H5 演示页：输入区与面板结构，含 5 个函数负责渲染、触发判定与插入"
|
||
},
|
||
{
|
||
"file": "frameworks/Mention.css",
|
||
"kind": "样式文件",
|
||
"desc": "Mention.css —— 本页组件类名的样式定义，由 Mention.html 第 8 行的 <link rel=\"stylesheet\" href=\"Mention.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"mention-ex-1"
|
||
],
|
||
"notes": [
|
||
"候选面板结构见（frameworks/Mention.html:19）",
|
||
"条目的选中态类名拼装见（frameworks/Mention.html:41）",
|
||
"键盘上下选分支见（frameworks/Mention.html:78）",
|
||
"chip 上记录姓名、移除时按 [data-n] 定位，见（frameworks/Mention.html:66）",
|
||
"点击外部收起面板见（frameworks/Mention.html:91）"
|
||
]
|
||
}
|