72 lines
3.2 KiB
JSON
72 lines
3.2 KiB
JSON
{
|
||
"slug": "switch",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 switch：prop 叫 checked 不是 value，点击时先改自身再抛 input 与 change，v-model 不会生效。",
|
||
"usage": [
|
||
"绑定值是 `checked`（第 9 行）而回写抛 `input`，Vue 2 的 `v-model` 传的是 value，名字不匹配，所以 `v-model` 静默不生效，要写 `:checked` 加 `@change`。",
|
||
"toggle() 里先执行 `this.checked = !this.checked` 改本地值再抛事件（第 15 行），所以即使父组件不回写，按钮外观也会自己切换。",
|
||
"一次点击抛两个事件：`input` 与 `change`（第 15 行），载荷都是切换后的布尔值，接任意一个即可。"
|
||
],
|
||
"bestPractices": [
|
||
"props 的 checked 与 data 的 checked 同名（第 9、13 行），不回写时以本地值优先，受控与非受控行为会混在一起，接入时务必接事件回写。",
|
||
"`:size` 在模板里没有任何绑定点，切尺寸不会改变类名，当前只有一套外观。",
|
||
"根元素是原生 button（第 2 行），点击与键盘空格/回车都能触发 toggle，不需要额外绑 keydown。"
|
||
],
|
||
"a11y": [
|
||
"按钮带 role=\"switch\" 与 `:aria-checked=\"checked\"`（第 2 行），开关语义与状态都对读屏可见，是这份实现里最完整的一处。",
|
||
"按钮文字固定为「切换」，读屏读出来偏泛；要更清楚可在外部补 aria-label 说明开关对象。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 3 项（checked/disabled/size，frameworks/Switch.vue2.vue:8-12）加 input 与 change 两个事件；绑定值名为 checked，与 v-model 约定不一致。",
|
||
"table": [
|
||
{
|
||
"name": "checked",
|
||
"type": "Boolean",
|
||
"desc": "是否选中（frameworks/Switch.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "属性",
|
||
"desc": "Boolean，落到原生 button 的 :disabled（frameworks/Switch.vue2.vue:10,2）"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 default，注释「尺寸」），模板未做任何绑定（frameworks/Switch.vue2.vue:11）"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "(val: any) => void",
|
||
"desc": "值变化时触发（frameworks/Switch.vue2.vue:15）"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/Switch.vue2.vue:15）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Switch.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Switch.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"switch-ex-1",
|
||
"switch-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/Switch.vue2.vue:9-11；toggle() 在第 15 行一次抛 input 与 change。",
|
||
"实测差异：绑定值是 checked 而不是 value，Vue 2 的 v-model 会传 value 并等 input，故 v-model 不生效；示例用 :checked 配 @change。"
|
||
]
|
||
}
|