64 lines
2.8 KiB
JSON
64 lines
2.8 KiB
JSON
{
|
||
"slug": "mention",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 @提及输入框，监听输入中的 @ 符号弹出选人面板，键盘上下键与回车可选中。",
|
||
"usage": [
|
||
"Vue 2 端 v-model=\"text\" 绑定文本，组件在 onInput 里派发 input 传回 e.target.value。",
|
||
"弹出判定基于光标位置：取 lastIndexOf(\"@\") 并要求 @ 前是空白或行首、@ 到光标之间无空白。",
|
||
"面板打开时用 @keydown.down / @keydown.up 配合 .prevent 移动高亮项，回车调用 insert 完成插入。",
|
||
"已提及的人会以 chip 形式列在下方，点 chip 里的 × 可以移除。"
|
||
],
|
||
"bestPractices": [
|
||
"键盘事件写在 textarea 上而不是 document，面板打开时焦点必须留在输入框内才能联动。",
|
||
"插入逻辑用 $refs.input 的 selectionStart 拿光标位置再拼字符串，不要在外层替换 value 后强行设光标，会被下一次渲染覆盖。",
|
||
"users 默认给了五位示例成员，实际项目必须传自己的成员数组，元素形如 { name, dept }。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端载体是 props 加一个 input 事件；点击外部关闭由本组件自定义的 clickOutside 指令实现。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "String，默认空串",
|
||
"desc": "输入框文本，v-model 的接收端"
|
||
},
|
||
{
|
||
"name": "users",
|
||
"type": "Array，默认内置五位示例成员",
|
||
"desc": "候选成员，元素形如 { name, dept }"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件，参数为新文本",
|
||
"desc": "输入时派发，v-model 依赖它"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"输入区是原生 textarea，可聚焦可读；但弹出面板是 div，没有 role=\"listbox\"，候选人不会被读屏器播报。",
|
||
"当前高亮项只有 is-active 类，缺少 aria-activedescendant，方向键选择对辅助技术不可见。",
|
||
"移除用的 × 是 <b> 标签，没有 aria-label，读屏器只会念出符号本身。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Mention.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Mention.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Mention.css",
|
||
"kind": "样式文件",
|
||
"desc": "Mention.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"mention-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Mention.vue2.vue:42-51，users 默认值在第 44-50 行。",
|
||
"input 事件在 frameworks/Mention.vue2.vue:58 与 71 派发，弹出判定在第 59-61 行。",
|
||
"键盘绑定见 frameworks/Mention.vue2.vue:11-14，clickOutside 指令注册在第 39-41 行。"
|
||
]
|
||
}
|