71 lines
3.1 KiB
JSON
71 lines
3.1 KiB
JSON
{
|
||
"slug": "switchgroup",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 switchgroup：v-model 绑选中值数组，每次切换抛整个新数组，表头可按需全选或全不选。",
|
||
"usage": [
|
||
"绑定是 `value` 数组加 `input`：toggle 里 `this.$emit('input', arr)`（第 36 行）每次抛的是重建后的完整数组，因此 `v-model` 可以直接绑数组。",
|
||
"`:select-all` 为真时表头出现那枚总开关（第 5 行），点击走 toggleAll()：全开时清空，否则一次抛入所有 options 的 value（第 39-40 行）。",
|
||
"`:title` 决定表头文字，但它与 selectAll 共用一个 v-if 条件（第 3 行），两个都为假时表头整块不渲染。"
|
||
],
|
||
"bestPractices": [
|
||
"选中判断是 `value.indexOf(o.value) >= 0`（第 12 行），数组里重复元素不影响结果，但传非数组会让 indexOf 抛错。",
|
||
"总开关的亮态由 allOn 计算属性得出（第 27-29 行），要求每一项都在选中数组里；options 为空时恒为 false。",
|
||
"toggle() 用 slice 复制再增删（第 33-35 行），不直接改传入数组，因此不必担心副作用改到父组件的数据。"
|
||
],
|
||
"a11y": [
|
||
"每行开关是 div 加 @click 且用 is-on 类表达状态（第 12 行），没有 role=\"switch\" 与 aria-checked，键盘也不可达。",
|
||
"表头总开关同样是 div（第 5 行），缺少可访问名称，读屏用户无法分辨它控制哪些项。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 4 项（options/value/title/selectAll，frameworks/SwitchGroup.vue2.vue:20-25）加一个 input 事件；载荷是完整的选中值数组而非单个值。",
|
||
"table": [
|
||
{
|
||
"name": "options",
|
||
"type": "Array",
|
||
"desc": "选项数据（frameworks/SwitchGroup.vue2.vue:7）"
|
||
},
|
||
{
|
||
"name": "selectAll",
|
||
"type": "Boolean",
|
||
"desc": "是否显示全选（frameworks/SwitchGroup.vue2.vue:3）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题（契约：分组标题、说明）（frameworks/SwitchGroup.vue2.vue:3）"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "属性",
|
||
"desc": "已选值的数组，参与每行 is-on 判断与增删重组（frameworks/SwitchGroup.vue2.vue:22,12,33-35）"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/SwitchGroup.vue2.vue:36）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/SwitchGroup.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/SwitchGroup.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"switchgroup-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/SwitchGroup.vue2.vue:21-24；两处 $emit('input') 在第 36 行与第 40 行。",
|
||
"allOn 计算属性在第 27-29 行，只被表头总开关的类名使用。"
|
||
]
|
||
}
|