64 lines
3.0 KiB
JSON
64 lines
3.0 KiB
JSON
{
|
||
"slug": "layoutswitcher",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 布局切换器：带微缩示意图的侧边/顶部/混合三选一，选中态即时回写。",
|
||
"usage": [
|
||
"用 v-model 绑定布局字符串，点击某项直接 emit(\"update:modelValue\", o.value)，没有额外的确认步骤（LayoutSwitcher.vue3.vue:8）。",
|
||
"options 传 [{ value, label }]，默认内置 side / top / mixed 三项，value 同时参与微缩示意图的分支判断（LayoutSwitcher.vue3.vue:11）。",
|
||
"缩略图按 value 决定画哪几条边：side 不画顶部条、top 不画侧边条、mixed 两者都画（LayoutSwitcher.vue3.vue:11）。",
|
||
"选中项以 is-active 类表达，未选中项无该状态类，样式差异完全由类决定（LayoutSwitcher.vue3.vue:7）。",
|
||
"本端只有 update:modelValue 一个事件，没有 change；需要埋点请监听 v-model 变化（LayoutSwitcher.vue3.vue:34）。"
|
||
],
|
||
"bestPractices": [
|
||
"示意图是纯 CSS 的 div 组合（s-top / s-side / s-main），与真实布局无关，接入后不要把它当成布局预览渲染（LayoutSwitcher.vue3.vue:12）。",
|
||
"value 字符串同时也是示意图分支条件，传入未登记的自定义 value 时三条边都不会画，需要同步调整模板（LayoutSwitcher.vue3.vue:11）。",
|
||
"modelValue 默认值是 side，必须与实际布局取值一致，否则首屏会出现选中态与真实布局不符（LayoutSwitcher.vue3.vue:24）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端是单一 modelValue 双向组件：布局取值同时是数据与示意图分支条件，两者耦合在同一 prop 上。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "String",
|
||
"desc": "当前布局取值，默认 side；v-model 绑定"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array",
|
||
"desc": "选项 [{ value, label }]，默认 side/top/mixed 三项"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: String)",
|
||
"desc": "点击任一布局项时回写该 value"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"选项是 div + @click，没有 role=\"radio\"、aria-checked 与 tabindex，键盘无法切换布局（LayoutSwitcher.vue3.vue:3）。",
|
||
"示意图内的 div 无文本，label 文本在兄弟节点上，读屏点击区域与可读名称没有关联（LayoutSwitcher.vue3.vue:17）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/LayoutSwitcher.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "layoutswitcher 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/LayoutSwitcher.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"layoutswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/LayoutSwitcher.vue3.vue:24 — defineProps 只有 modelValue 与 options",
|
||
"frameworks/LayoutSwitcher.vue3.vue:8 — 点击即回写，无确认步骤",
|
||
"frameworks/LayoutSwitcher.vue3.vue:34 — 仅 update:modelValue，无 change"
|
||
]
|
||
}
|