69 lines
3.5 KiB
JSON
69 lines
3.5 KiB
JSON
{
|
||
"slug": "segmented",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 端分段控件：options 渲染 button 组，modelValue 严格相等定高亮。",
|
||
"usage": [
|
||
"defineProps 只有 modelValue 与 options 两个，且 options 是 required: true（第 17-20 行），不传它会直接告警。",
|
||
"点击分段同时派发 update:modelValue 与 change（第 25-26 行），选择值走 modelValue，v-model=\"view\" 是最短写法。",
|
||
"高亮判定是严格相等 modelValue === opt.value（第 6 行），options 里 value 是数字就绑数字，字符串 \"1\" 与数字 1 不会命中。",
|
||
"每个分段渲染成原生 <button>（第 3 行），禁用项同时挂 :disabled=\"opt.disabled\" 与 is-disabled 类（第 6-7 行），原生属性会拦掉点击。",
|
||
"选项字段是 label / value / icon / disabled（第 19 行注释），有 icon 时在文字前多渲染一个 .ico 节点（第 10 行）。"
|
||
],
|
||
"bestPractices": [
|
||
"v-for 的 key 用 opt.value（第 4 行），value 重复会复用错乱，务必保证它唯一。",
|
||
"禁用拦截有两道：原生 disabled 属性与 choose 里的 return（第 7、24 行），只加样式类不设 disabled 是拦不住的。",
|
||
"高亮样式是 .kole-segmented-item.is-active 类（第 6 行），本端还额外用加粗与阴影区分（第 41 行），覆盖样式时这几处要一起改。"
|
||
],
|
||
"a11y": [
|
||
"每个分段是原生 <button>（第 3 行），可 Tab 可回车，禁用走原生 disabled，这是本端无障碍最扎实的一点。",
|
||
"高亮只有 is-active 类（第 6 行），没有 aria-pressed 或 aria-selected，读屏器读到的是一组普通按钮、读不出当前选中项。",
|
||
"容器是普通 div（第 2 行），没有 tablist 或 radiogroup 之类的组语义，外层最好再补一个可读的分组标签。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端载体是 modelValue、options 两个 props 与 update:modelValue、change 两个 emit；没有插槽，文案与图标全部来自 options 项（表内只列了 change 一个事件）。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "String | Number",
|
||
"desc": "双向绑定值（frameworks/Segmented.vue3.vue:6）"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array",
|
||
"desc": "选项数据（契约：默认高度 32px，选项内边距 8px 16px）（frameworks/Segmented.vue3.vue:4）"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "(val: any) => void",
|
||
"desc": "值变化时触发（frameworks/Segmented.vue3.vue:21）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Segmented.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Segmented.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"segmented-ex-1",
|
||
"segmented-ex-2",
|
||
"segmented-ex-3",
|
||
"segmented-ex-4"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Segmented.vue3.vue:17-20（options 为 required: true），emits 见第 21 行。",
|
||
"高亮类绑定见 frameworks/Segmented.vue3.vue:6，派发见第 23-27 行。",
|
||
"分段是 button 且带原生 disabled（frameworks/Segmented.vue3.vue:3-7），键盘与禁用语义由浏览器提供。",
|
||
"契约 apiTable 只列 modelValue / options 两个 prop，与实现一致；该端没有插槽实现。"
|
||
]
|
||
}
|