56 lines
2.7 KiB
JSON
56 lines
2.7 KiB
JSON
{
|
||
"slug": "themeswitcher",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 themeswitcher：两个 .sync 属性 mode 与 brand，鼠标点击与键盘回车空格抛同一种 update 事件。",
|
||
"usage": [
|
||
"对外抛的是 `update:mode` 与 `update:brand`（第 11-13、28-30 行），所以惯用写法是 `:mode.sync=\"mode\"` 与 `:brand.sync=\"brand\"`，.sync 在 Vue 2 里正展开成这两个监听。",
|
||
"每个模式项是 `@click`、`@keydown.enter`、`@keydown.space.prevent` 三条都抛 `update:mode`（第 11-13 行），鼠标与键盘走同一条回写路径。",
|
||
"`:brand` 不仅是选中态，还渲染在底部那行「品牌色：」文本里（第 33 行），可以在界面上直接看到当前色值。"
|
||
],
|
||
"bestPractices": [
|
||
"选中项判断用 `:aria-checked=\"mode === m.value\"` 加 is-active 类（第 9-10 行），比较是全等，传值大小写要与 modes 里的字面量一致。",
|
||
"可选项固定：模式是 light/dark/auto，品牌色是 data.brands 里那六个色值（第 46-51 行），传别的值不会被渲染出来。",
|
||
"两个列表项都带 tabindex=\"0\" 与 role=\"radio\"（第 7-8、22-24 行），键盘 Tab 能逐个进入，不需要额外补焦点管理。"
|
||
],
|
||
"a11y": [
|
||
"根容器带 role=\"radiogroup\" 与 aria-label=\"主题模式\"（第 2 行），品牌色项还有 `:aria-label=\"'品牌色 ' + c\"`，分组与单项都有可访问名称。",
|
||
"每个可选项都显式写了 tabindex=\"0\" 与 role=\"radio\"，键盘焦点与状态播报都成立，空格与回车均已绑定。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 2 项（mode/brand，frameworks/ThemeSwitcher.vue2.vue:40-43）加 update:mode、update:brand 两个事件；无内部值，完全受控。",
|
||
"table": [
|
||
{
|
||
"name": "brand",
|
||
"type": "String",
|
||
"desc": "品牌标识（frameworks/ThemeSwitcher.vue2.vue:25）"
|
||
},
|
||
{
|
||
"name": "mode",
|
||
"type": "String",
|
||
"desc": "模式（frameworks/ThemeSwitcher.vue2.vue:9）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ThemeSwitcher.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ThemeSwitcher.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"themeswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/ThemeSwitcher.vue2.vue:41-42；六处 $emit 在第 11-13 行与第 28-30 行，均为 update: 前缀。",
|
||
"模式与色值的可选项写在 data 的 modes 与 brands（第 46-51 行），因此渲染内容不依赖外部传参。"
|
||
]
|
||
}
|