112 lines
5.4 KiB
JSON
112 lines
5.4 KiB
JSON
{
|
||
"slug": "layoutswitcher",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端布局切换器：支持 v-model，选项列表可由 options prop 覆盖，点击派发 input 事件回传 value。",
|
||
"usage": [
|
||
"v-model 直接可用：<KoleLayoutSwitcher v-model=\"layout\" /> 等价于 :value 加 @input，因为组件在点击时 $emit('input', o.value)（LayoutSwitcher.vue2.vue:8,26）。",
|
||
"选项列表有 options prop 且有默认值：默认是 side/top/mixed 三项，传自己的数组就能换标签与顺序（LayoutSwitcher.vue2.vue:27-34）。",
|
||
"选中判断写在模板里：:class=\"{ 'is-active': value === o.value }\"，没有 computed 中转（LayoutSwitcher.vue2.vue:7）。",
|
||
"缩略图同样用条件渲染：v-if=\"o.value !== 'side'\" 控制 .s-top、v-if=\"o.value !== 'top'\" 控制 .s-side（LayoutSwitcher.vue2.vue:11,13）。",
|
||
"本端只派发 input，没有 change 事件；要监听选择变化请用 @input 或 v-model，写 @change 不会触发（LayoutSwitcher.vue2.vue:8）。",
|
||
"组件没有内部 data，纯 props 驱动渲染，是否切换完全取决于父组件把 value 改不改（LayoutSwitcher.vue2.vue:23-36）。"
|
||
],
|
||
"bestPractices": [
|
||
"选项对象只需要 value 与 label 两个字段，额外字段不会被渲染也不报错；自定 options 时保持这两个键即可（LayoutSwitcher.vue2.vue:4,17,4-14）。",
|
||
"options 的 default 写成工厂函数，避免多个实例共享同一个数组（LayoutSwitcher.vue2.vue:29）。",
|
||
"只写 v-model 不写 options 时展示默认三项；要加「折叠布局」这类选项必须走 options 覆盖，组件不会根据 value 自动扩展选项（LayoutSwitcher.vue2.vue:29-33）。",
|
||
"示例里用 <KoleLayoutSwitcher direction=\"row\" gap=\"16px\"> 这类属性时不会报错也不会生效，可读 props 只有 value 与 options（LayoutSwitcher.vue2.vue:26-27）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 API 载体是 props 加 emit：value 表示当前布局、options 提供选项列表，点击时派发 input 事件（Vue 2 的 v-model 通道）；组件没有 change 事件、没有插槽，也没有 .sync 目标。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "String，默认 'side'",
|
||
"desc": "当前布局值，与选项的 value 比对决定 is-active"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array，默认三项内置选项",
|
||
"desc": "选项列表，每项形如 { value, label }"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件，载荷为选项的 value",
|
||
"desc": "点击选项时派发，构成 v-model 的回写通道"
|
||
},
|
||
{
|
||
"name": "kole-layoutsw",
|
||
"type": "结构类名",
|
||
"desc": "选项容器类名"
|
||
},
|
||
{
|
||
"name": "kole-layoutsw-opt",
|
||
"type": "结构类名",
|
||
"desc": "选项类名，选中时由 :class 绑定 is-active"
|
||
},
|
||
{
|
||
"name": "kole-layoutsw-mini",
|
||
"type": "结构类名",
|
||
"desc": "缩略图框类名"
|
||
},
|
||
{
|
||
"name": "kole-layoutsw-label",
|
||
"type": "结构类名",
|
||
"desc": "选项文字标签，内容取 o.label"
|
||
},
|
||
{
|
||
"name": "s-top",
|
||
"type": "缩略图块",
|
||
"desc": "顶部导航色块，v-if 非 side 时渲染"
|
||
},
|
||
{
|
||
"name": "s-body",
|
||
"type": "缩略图块",
|
||
"desc": "缩略图主体行"
|
||
},
|
||
{
|
||
"name": "s-side",
|
||
"type": "缩略图块",
|
||
"desc": "侧边色块，v-if 非 top 时渲染"
|
||
},
|
||
{
|
||
"name": "s-main",
|
||
"type": "缩略图块",
|
||
"desc": "内容区色块，恒渲染"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"选项 div 只有 @click，没有 tabindex 与键盘事件，Vue 2 端同样无法用 Tab 聚焦切换（LayoutSwitcher.vue2.vue:3-9）。",
|
||
"容器与选项都没有 role 或 aria-checked，单选组语义完全缺失，读屏器只把它当作一组普通 div（LayoutSwitcher.vue2.vue:2-19）。",
|
||
"选中态只体现为边框与光晕变化，无文字提示；需要无障碍等价信息时应由业务侧补 aria-checked 并同步维护（LayoutSwitcher.css:5）。",
|
||
"选项标签文字随 options 的 label 变化，读屏器播报的内容就是业务传入的文案，不会读到缩略图色块（LayoutSwitcher.vue2.vue:17）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/LayoutSwitcher.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "LayoutSwitcher.vue2.vue —— 模板、value/options 两个 prop 与 input 事件派发"
|
||
},
|
||
{
|
||
"file": "frameworks/LayoutSwitcher.css",
|
||
"kind": "样式文件",
|
||
"desc": "LayoutSwitcher.css —— <style src> 引入的选项卡片与缩略图样式"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"layoutswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"prop 声明与 options 默认值：frameworks/LayoutSwitcher.vue2.vue:26-34",
|
||
"选中类绑定：frameworks/LayoutSwitcher.vue2.vue:7",
|
||
"input 事件派发：frameworks/LayoutSwitcher.vue2.vue:8",
|
||
"缩略图条件渲染：frameworks/LayoutSwitcher.vue2.vue:11-14",
|
||
"样式引入：frameworks/LayoutSwitcher.vue2.vue:39",
|
||
"consumedApi.props 里出现 type/default 等词是 props 声明块自身的字样（LayoutSwitcher.vue2.vue:26,29），实际对外 props 只有 value 与 options。",
|
||
"契约 dims 的 collapsed 维度在本端无实现，按实现写。"
|
||
]
|
||
}
|