77 lines
3.9 KiB
JSON
77 lines
3.9 KiB
JSON
{
|
||
"slug": "dashboardcard",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 数据卡片：五个纯展示 prop，趋势值直接当类名挂在数值下方。",
|
||
"usage": [
|
||
"trend 的取值直接当类名用（DashboardCard.vue3.vue:8 的 :class 绑 trend），传 up 得到的 class 就是 up，不是 is-up 也不是 trend-up；它由 defineProps 声明且默认 up（第 17 行）。",
|
||
"组件是 <script setup> 加一个 defineProps，五个 prop 全是展示数据，没有 emit、没有插槽，也没有内部状态。",
|
||
"icon 的默认值 📊 写在 defineProps 声明里（第 16 行），以文本节点渲染，不经过图标组件或 SVG sprite。",
|
||
"value 在 defineProps 里声明为 String 或 Number（第 15 行），组件不做千分位、单位或小数位处理，格式化要在传进来之前做完。",
|
||
"卡片结构固定为标题加图标一行、数值一行、趋势一行（第 3-8 行），组件不提供具名插槽，要加副标题只能在外面包一层。"
|
||
],
|
||
"bestPractices": [
|
||
"trend 只负责挂类名，样式表里若没有对应的 up/down 规则，涨跌颜色不会出现，拼错值会静默变成无样式类名。",
|
||
"五个 prop 都带默认值（icon 是 📊，其余空串），漏传不报错但会渲染出空标题与空数值，容易被当成布局错位排查。",
|
||
"trendText 与 trend 是两件事：前者是显示的文案，后者只用来挂类，要显示较昨日涨 12% 得自己拼进 trendText。"
|
||
],
|
||
"a11y": [
|
||
"涨跌只用类名表达颜色，没有文字说明或 ARIA 状态；只给一个箭头字符时读屏器会念成符号，建议 trendText 里同时写清上升或下降。",
|
||
"结构是 div 堆叠，读屏器按顺序念标题、数值、趋势，没有标题层级也没有分组标记，一屏多张卡片时难以分辨归属。",
|
||
"图标是文本 emoji，读屏器会念出图标名，纯装饰时它反而干扰了对标题的首个播报内容。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 3 端载体是 defineProps 声明的五个展示型 prop（title / value / icon / trend / trendText）；其中 trend 的值还会作为类名落到 .kole-dashcard-trend 上（frameworks/DashboardCard.vue3.vue:8,13-19）。",
|
||
"table": [
|
||
{
|
||
"name": "icon",
|
||
"type": "String",
|
||
"desc": "图标（frameworks/DashboardCard.vue3.vue:5）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题（frameworks/DashboardCard.vue3.vue:4）"
|
||
},
|
||
{
|
||
"name": "trend",
|
||
"type": "String",
|
||
"desc": "趋势值（frameworks/DashboardCard.vue3.vue:8）"
|
||
},
|
||
{
|
||
"name": "trendText",
|
||
"type": "String",
|
||
"desc": "趋势文案（frameworks/DashboardCard.vue3.vue:8）"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "String | Number",
|
||
"desc": "绑定值（frameworks/DashboardCard.vue3.vue:7）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DashboardCard.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/DashboardCard.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"dashboardcard-ex-1",
|
||
"dashboardcard-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/DashboardCard.vue3.vue:13-19，value 在第 15 行接受 String 或 Number，icon 默认值在第 16 行。",
|
||
"trend 作为类名绑定见 frameworks/DashboardCard.vue3.vue:8，卡片三段结构见 frameworks/DashboardCard.vue3.vue:3-8。",
|
||
"实现里没有 defineEmits 与 slot（facts.consumedApi 的 emits 与 slots 均为空），故本页不写事件与插槽。",
|
||
"契约声明的驱动维度 action / layout 属设计词汇层，未作为 prop 写入本页。"
|
||
]
|
||
}
|