69 lines
3.3 KiB
JSON
69 lines
3.3 KiB
JSON
{
|
||
"slug": "densityswitcher",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 密度切换器：宽松/默认/紧凑三档按钮，并在下方用示例列表实时反映行高效果。",
|
||
"usage": [
|
||
"v-model 绑定密度字符串，三个按钮由 options 渲染，点击即 emit(\"update:modelValue\", o.value)（DensitySwitcher.vue3.vue:9）。",
|
||
"rows 是下方演示列表的数据，每项 { name, count }，不传时用内置的用户/角色/菜单三条示例（DensitySwitcher.vue3.vue:29）。",
|
||
"演示区的类名直接取 modelValue 值（loose / default / compact），因此密度切换的效果由样式文件里同名类承担（DensitySwitcher.vue3.vue:12）。",
|
||
"选中按钮挂 is-active 类，未选中无状态类；按钮是真实 button 元素，可键盘聚焦（DensitySwitcher.vue3.vue:4）。",
|
||
"本端没有 change 事件与 defineExpose，密度值只通过 v-model 回写父组件（DensitySwitcher.vue3.vue:38）。"
|
||
],
|
||
"bestPractices": [
|
||
"演示区与真实表格密度是两套东西：组件只改自身 class，全局表格密度需要业务把同一个 modelValue 传给表格样式容器（DensitySwitcher.vue3.vue:12）。",
|
||
"options 的 value 会被直接用作类名，自定义 value 需保证是合法且已在 CSS 中定义的类名，否则演示区没有效果（DensitySwitcher.vue3.vue:20）。",
|
||
"rows 中的 count 是纯文本字符串（如「128 项」），不是数字字段，做数据绑定时要带上单位或改造该字段（DensitySwitcher.vue3.vue:32）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端把「切换器 + 效果演示」打包在一起：modelValue 既是选中值，也是演示区的类名来源。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "String",
|
||
"desc": "当前密度取值，默认 default；同时作为演示区类名"
|
||
},
|
||
{
|
||
"name": "options",
|
||
"type": "Array",
|
||
"desc": "档位 [{ value, label }]，默认 loose/default/compact"
|
||
},
|
||
{
|
||
"name": "rows",
|
||
"type": "Array",
|
||
"desc": "演示列表数据 [{ name, count }]，默认三条内置示例"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: String)",
|
||
"desc": "点击档位按钮时回写该 value"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"三个按钮是原生 button，键盘可达；但容器没有 role=\"radiogroup\" 与 aria-pressed，读屏无法得知当前选中的是哪一档（DensitySwitcher.vue3.vue:3）。",
|
||
"演示列表的行是 div 加两个 span，读屏会把名称与数量连读，没有列表语义（ul/li）可供跳读（DensitySwitcher.vue3.vue:13）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DensitySwitcher.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "densityswitcher 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/DensitySwitcher.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"densityswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/DensitySwitcher.vue3.vue:20 — defineProps 声明 modelValue/options/rows",
|
||
"frameworks/DensitySwitcher.vue3.vue:12 — 演示区类名直接取 modelValue 值",
|
||
"frameworks/DensitySwitcher.vue3.vue:38 — 仅 update:modelValue 事件"
|
||
]
|
||
}
|