59 lines
2.5 KiB
JSON
59 lines
2.5 KiB
JSON
{
|
|
"slug": "quicknav",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 快捷入口宫格，items 提供图标与名称，点击整项回传该项数据。",
|
|
"usage": [
|
|
"Vue 2 端 items 默认给了八个入口（数据看板、用户管理、订单管理等），直接可用也可覆盖。",
|
|
"点击派发 select 事件并回传整个 item 对象，不含索引，需要索引时在数据里自带字段。",
|
|
"每项结构固定为图标加名称上下两行，图标是文字或 emoji，不需要引入图标组件。",
|
|
"组件没有选中态与禁用态，所有项外观一致、全部可点。"
|
|
],
|
|
"bestPractices": [
|
|
"item 对象里可以放路由等自定义字段，点击回调里拿完整对象即可直接跳转。",
|
|
"宫格排列与换行由 CSS 控制，组件只负责渲染扁平列表，改列数去改样式而不是加 prop。",
|
|
"这是纯跳转入口，不承载状态，需要徽章或禁用请换用侧边菜单的 items 结构。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端只有 1 个 prop 与 1 个 select 事件，条目内容全部来自 items 数据。",
|
|
"table": [
|
|
{
|
|
"name": "items",
|
|
"type": "Array，默认八个内置入口",
|
|
"desc": "入口数据，元素形如 { icon, label }"
|
|
},
|
|
{
|
|
"name": "select",
|
|
"type": "事件，参数为被点击的 item 对象",
|
|
"desc": "点击任一项时派发"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"每项是可点击的 div，没有 role=\"button\"、tabindex 与键盘事件，键盘用户无法进入。",
|
|
"图标 emoji 与名称文本都会被朗读，图标若与名称重复会造成重复播报。",
|
|
"没有列表语义（ul/li 或 role=\"list\"），读屏器不会告知共有多少项。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/QuickNav.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "QuickNav.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/QuickNav.css",
|
|
"kind": "样式文件",
|
|
"desc": "QuickNav.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"quicknav-ex-1"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/QuickNav.vue2.vue:18-32，内置默认数据在第 21-30 行。",
|
|
"select 事件在 frameworks/QuickNav.vue2.vue:7 派发，回传整个 it 对象。",
|
|
"模板结构见 frameworks/QuickNav.vue2.vue:3-11，图标与名称分两行渲染。"
|
|
]
|
|
}
|