71 lines
2.8 KiB
JSON
71 lines
2.8 KiB
JSON
{
|
||
"slug": "segmented",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 分段控制器，options 必填，选中值通过 input 事件回传可直接 v-model。",
|
||
"usage": [
|
||
"Vue 2 端 v-model=\"view\" 即可切换分组，组件在 choose 里同步派发 input 与 change。",
|
||
"每个选项可带 icon，会渲染在文字前（emoji 或字符都能用）。",
|
||
"选项内的 disabled 会同时落到原生 :disabled 与 is-disabled 类，点击也提前 return。",
|
||
"options 是必填项，元素形如 { label, value, icon?, disabled? }。"
|
||
],
|
||
"bestPractices": [
|
||
"容器宽度由内容决定（inline-flex），选项多时请在业务侧限制宽度或换用其它组件。",
|
||
"选中态判断是严格相等 value === opt.value，value 传字符串而 option 用数字会始终不匹配。",
|
||
"组件没有插槽，选项文字与图标只能通过 options 传，无法嵌入自定义节点。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端为 2 个 prop 加 input/change 双事件，没有插槽，选项结构完全由 options 数据驱动。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "String | Number，默认空串",
|
||
"desc": "当前选中值，v-model 的接收端"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array，必填",
|
||
"desc": "选项数组，形如 { label, value, icon?, disabled? }"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件，参数为 opt.value",
|
||
"desc": "点击可用选项时派发，v-model 依赖它"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "事件，参数为 opt.value",
|
||
"desc": "与 input 同时派发，负载相同"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"每个分段渲染为原生 button 且带 :disabled，键盘可聚焦、可回车激活。",
|
||
"选中态只有 is-active 类，没有 aria-pressed 或 aria-selected，读屏器无法识别当前项。",
|
||
"toggle 组缺少 role=\"radiogroup\" 之类的容器语义，建议外层补 role 与 aria-label。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Segmented.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Segmented.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Segmented.css",
|
||
"kind": "样式文件",
|
||
"desc": "Segmented.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"segmented-ex-1",
|
||
"segmented-ex-2",
|
||
"segmented-ex-4"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Segmented.vue2.vue:19-22，options 在第 21 行标 required: true。",
|
||
"input 与 change 在 frameworks/Segmented.vue2.vue:26-27 成对派发。",
|
||
"原生 disabled 绑定见 frameworks/Segmented.vue2.vue:7，选中判定见第 6 行。"
|
||
]
|
||
}
|