55 lines
2.6 KiB
JSON
55 lines
2.6 KiB
JSON
{
|
|
"slug": "shortcutpanel",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 快捷键面板，内置一份快捷键数据，支持按名称或键位过滤。",
|
|
"usage": [
|
|
"Vue 2 端不传 items 时会用内置的八条快捷键（保存、搜索、新建等）。",
|
|
"搜索框用组件内部的 q 绑定（v-model 只作用在私有状态上），过滤同时匹配 name 与 key 两条字段。",
|
|
"过滤时把查询串与两个字段都转小写比较，所以大小写不敏感。",
|
|
"过滤结果为空时渲染空态提示，不需要业务侧处理。"
|
|
],
|
|
"bestPractices": [
|
|
"面板没有对外事件，点某一项不会回传选择，需要联动请改实现或在外层包监听。",
|
|
"items 每项形如 { name, key }，两个字段都参与过滤，命名要保持一致否则搜不到。",
|
|
"组件不自带弹出与显隐逻辑，它只是一块面板，显示时机由业务侧控制。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端 1 个 prop、0 事件、0 插槽；搜索词是组件私有 data，不走 v-model 对外暴露。",
|
|
"table": [
|
|
{
|
|
"name": "items",
|
|
"type": "Array，默认内置八条快捷键",
|
|
"desc": "数据项，元素形如 { name, key }，两者都参与过滤"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"快捷键是「名称 + 键位」两段文本，读屏器能读到，但缺少 dl/kbd 之类的语义结构。",
|
|
"搜索框是原生 input 带 placeholder，但它没有 label 元素，读屏器只能依赖占位文字。",
|
|
"键位里的「+」会被朗读为加号，对「Ctrl + S」这类组合键的可听性尚可，但不如 kbd 语义清晰。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/ShortcutPanel.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "ShortcutPanel.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/ShortcutPanel.css",
|
|
"kind": "样式文件",
|
|
"desc": "ShortcutPanel.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"shortcutpanel-ex-1"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/ShortcutPanel.vue2.vue:16-30，内置默认数据在第 19-28 行。",
|
|
"过滤逻辑见 frameworks/ShortcutPanel.vue2.vue 的 filtered 计算属性，同时对 name 与 key 做 indexOf。",
|
|
"内部搜索绑定见 frameworks/ShortcutPanel.vue2.vue:3 的 v-model=\"q\"。",
|
|
"事实包 consumedApi 里出现的 modelValue 在 frameworks/ShortcutPanel.vue2.vue 全文不存在，本页按实现只写 items。"
|
|
]
|
|
}
|