60 lines
2.9 KiB
JSON
60 lines
2.9 KiB
JSON
{
|
||
"slug": "breadcrumb",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 面包屑，只有 items 一个 prop，最后一项自动变成不可点击的当前位置。",
|
||
"usage": [
|
||
"Vue 2 端传 items（形如 [{ label }]）即可，分隔符与首尾拼接都由组件完成，不用手写斜杠。",
|
||
"点击非末项派发 select 事件并回传被点的那一项对象，末项点击直接短路不求值。",
|
||
"末项自动加上 is-current 类，视觉上是当前页样式。",
|
||
"items 为空数组时容器仍然渲染，需要空态时请在业务侧判断。"
|
||
],
|
||
"bestPractices": [
|
||
"本实现把 :key 写在 <template v-for> 标签上（第 3 行），这是 Vue 3 才允许的写法；Vue 2 要求 key 落在 template 内部的真实元素上，集成到 Vue 2 项目前需把 key 挪到那两个 span 上。",
|
||
"select 事件只回传整个 item 对象，没有 index 参数，需要序号时在 items 里自带字段。",
|
||
"items 的默认值写作 function(){ return [] }，这是 Vue 2 中数组型 prop 默认值的标准写法，改写成箭头函数也一样安全。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端只有一个 items prop 与一个 select 事件，是本批里 API 面最小的组件。",
|
||
"table": [
|
||
{
|
||
"name": "items",
|
||
"type": "Array，默认空数组",
|
||
"desc": "面包屑项，元素形如 { label }"
|
||
},
|
||
{
|
||
"name": "select",
|
||
"type": "事件，参数为被点击的 item",
|
||
"desc": "点击非末项时派发"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"渲染为 div 与 span 的组合，没有 nav 与 aria-label，读屏器不会宣告这是导航区。",
|
||
"当前项只有视觉类名，缺少 aria-current=\"page\"，建议外层补 nav 并在业务侧标注。",
|
||
"分隔符 / 作为纯文本输出，会被读屏器念出来，若在意可在外层加 aria-hidden。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Breadcrumb.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Breadcrumb.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Breadcrumb.css",
|
||
"kind": "样式文件",
|
||
"desc": "Breadcrumb.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"breadcrumb-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Breadcrumb.vue2.vue:14，写作 props: { items: ... } 的单行形式。",
|
||
"select 事件在 frameworks/Breadcrumb.vue2.vue:5 派发，前置条件 i !== items.length - 1。",
|
||
"template v-for 与 :key 见 frameworks/Breadcrumb.vue2.vue:3，is-current 判定见第 4 行。",
|
||
"该行 :key 直接写在 <template> 标签上（第 3 行），Vue 3 语法允许、Vue 2 不允许，该项与实现的出入已记入 bestPractices。"
|
||
]
|
||
}
|