85 lines
3.9 KiB
JSON
85 lines
3.9 KiB
JSON
{
|
||
"slug": "card",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 卡片容器，title/bordered/shadowed/padding 四个 props 配四个插槽分区，组件不派发事件。",
|
||
"usage": [
|
||
"`defineProps` 收 title / bordered / shadowed / padding 四个，其余内容全走插槽；padding 是 Number|String 双类型，数字会自动补 px 单位。",
|
||
"四个插槽分工固定：默认插槽进 `.kole-card__body`，具名 title 替换标题并兜底显示 title prop，extra 进右上角，actions 进底部操作区。",
|
||
"头部整块的渲染条件是 `title || $slots.extra`，只给了 extra 插槽时头部也会出现、标题区留空。",
|
||
"bordered 与 shadowed 各映射一个类（`kole-card--bordered` / `kole-card--shadowed`），由 `classes` 计算属性拼进 `:class`，两个都为真时边框与阴影同时生效。",
|
||
"组件自身不派发任何事件，右上角与底部按钮的点击要由插槽里的元素自己绑。"
|
||
],
|
||
"bestPractices": [
|
||
"组件内联样式给了 `min-width: 280px` 与 `max-width: 360px`，窄容器里卡片不会继续压缩，栅格中排列要留意这对硬边界。",
|
||
"padding 作用在卡片根容器上（头部与操作区一起受影响），只想要正文内边距需另行覆盖 `.kole-card__body`。",
|
||
"title prop 与 title 插槽同名：插槽有内容时 prop 不再显示，两处都写会得到「只有一处生效」的结果。",
|
||
"底部 actions 用 `justify-content: flex-end` 靠右排列，按钮顺序按插槽内的书写顺序。"
|
||
],
|
||
"a11y": [
|
||
"卡片根节点是 div，没有 `role=\"region\"` 与标题关联，title 只是文本而不是读屏器可引用的标题。",
|
||
"右上角 extra 常放「更多」之类操作，若用图标需自带名字，组件不提供任何 aria 支持。",
|
||
"若整卡要可点击（做成入口卡片），应由真正的 `<a>` 或 `<button>` 承载，div 加点击对键盘不可达。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 3 端的 API 载体是 4 个 props（title / bordered / shadowed / padding）与 4 个插槽（default / title / extra / actions），无事件。",
|
||
"table": [
|
||
{
|
||
"name": "bordered",
|
||
"type": "Boolean",
|
||
"desc": "是否显示边框（frameworks/Card.vue3.vue:19）"
|
||
},
|
||
{
|
||
"name": "padding",
|
||
"type": "Number | String",
|
||
"desc": "内边距（frameworks/Card.vue3.vue:2）"
|
||
},
|
||
{
|
||
"name": "shadowed",
|
||
"type": "Boolean",
|
||
"desc": "是否带阴影（frameworks/Card.vue3.vue:20）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题（契约：结构：标题区、内容区、操作区）（frameworks/Card.vue3.vue:3）"
|
||
},
|
||
{
|
||
"name": "actions",
|
||
"type": "插槽",
|
||
"desc": "Vue 3 端实现直接消费的 插槽。（frameworks/Card.vue3.vue:10）"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "插槽",
|
||
"desc": "默认插槽（组件文本或主体内容）（frameworks/Card.vue3.vue:18）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Card.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Card.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"card-ex-1",
|
||
"card-ex-2",
|
||
"card-ex-3"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Card.vue3.vue:17-22，padding 类型为 [Number, String]。",
|
||
"四个插槽分别见 frameworks/Card.vue3.vue:5（title）、7（extra）、9（default）、10（actions）。",
|
||
"头部渲染条件 title || $slots.extra 见 frameworks/Card.vue3.vue:3。",
|
||
"内联样式含 min-width 280px 与 max-width 360px，见 frameworks/Card.vue3.vue:37。",
|
||
"该端无事件出口：frameworks/Card.vue3.vue 全文未出现 defineEmits。"
|
||
]
|
||
}
|