75 lines
3.2 KiB
JSON
75 lines
3.2 KiB
JSON
{
|
||
"slug": "densityswitcher",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 densityswitcher：一排按钮改密度，唯一的 input 事件只回传被点的那个 value，没有 change。",
|
||
"usage": [
|
||
"按钮上写的是 `@click=\"$emit('input', o.value)\"`（第 9 行），只有 `input` 一个事件，所以 `v-model` 绑密度值可以直接用。",
|
||
"`:value` 参与两处渲染：按钮的 is-active 判断，以及下方演示区根元素的 `:class=\"value\"`（第 12 行），取值要和 CSS 的密度类名一致。",
|
||
"`:options` 决定按钮的数量与文案，`:rows` 决定演示列表的两列内容，两者都是数组，传空数组按钮区会整块空掉。"
|
||
],
|
||
"bestPractices": [
|
||
"options 项必须带 value 与 label 两个字段，模板里按钮 key 与文案分别取它们，缺 label 会渲染出空白按钮。",
|
||
"组件只抛 input 不抛 change，若同时监听 change 做副作用会一直不触发，统一用 @input 或 v-model 更稳。"
|
||
],
|
||
"a11y": [
|
||
"按钮是原生 <button>，键盘可聚焦，但没有 role=\"radiogroup\" 也没有 aria-pressed 表达当前选中项。",
|
||
"选中态只靠 is-active 类名与视觉样式，屏幕阅读器读不出哪一个按钮是当前密度。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 4 项（value/options/rows 与默认值，frameworks/DensitySwitcher.vue2.vue:21-39）加一个 input 事件；事件在模板内联抛出，没有 methods。",
|
||
"table": [
|
||
{
|
||
"name": "default",
|
||
"type": "属性",
|
||
"desc": "default：契约层词汇，该端 props 块未声明此属性，不作为 API 使用（frameworks/DensitySwitcher.vue2.vue:21-39）"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array",
|
||
"desc": "选项数据（frameworks/DensitySwitcher.vue2.vue:5）"
|
||
},
|
||
{
|
||
"name": "rows",
|
||
"type": "Array",
|
||
"desc": "行数据（frameworks/DensitySwitcher.vue2.vue:13）"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "属性",
|
||
"desc": "type：契约层词汇，该端 props 块未声明此属性，不作为 API 使用（frameworks/DensitySwitcher.vue2.vue:21-39）"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "属性",
|
||
"desc": "当前密度值，同时进 is-active 判断与演示区类名（frameworks/DensitySwitcher.vue2.vue:22,8,12）"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/DensitySwitcher.vue2.vue:9）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DensitySwitcher.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/DensitySwitcher.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"densityswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/DensitySwitcher.vue2.vue:22-38；唯一的 $emit 在模板第 9 行，抛 input 不带 change。",
|
||
"表格里的 default / type 两行在 props 块中不存在（只有 value/options/rows），属契约层词汇，不作为 API 使用。"
|
||
]
|
||
}
|