75 lines
2.9 KiB
JSON
75 lines
2.9 KiB
JSON
{
|
|
"slug": "dashboardcard",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 指标卡片，标题、数值、趋势三段式布局，趋势上下用手势文案加类名表达。",
|
|
"usage": [
|
|
"Vue 2 端五个 prop 全部是纯展示数据：title、value、icon、trend、trendText。",
|
|
"trend 的值会直接作为类名附加到趋势行上（:class=\"trend\"），通常传 up 或 down。",
|
|
"trendText 是趋势的说明文字，例如同比上升 12%，与 trend 需成对提供。",
|
|
"icon 默认是 📊 表情符号，也可以传任意字符或短文本。"
|
|
],
|
|
"bestPractices": [
|
|
"trend 不参与任何逻辑判断，只当类名用，取值要与 CSS 里定义的样式类对应。",
|
|
"value 接受 String 与 Number，业务侧已在外部格式化时可直接传字符串（如「1,234」）。",
|
|
"卡片没有事件与插槽，结构固定，需要图表或交互请改用 chartpanel。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端 5 个 prop、0 事件、0 插槽，是最典型的纯展示型组件。",
|
|
"table": [
|
|
{
|
|
"name": "title",
|
|
"type": "String，默认空串",
|
|
"desc": "指标名称"
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "String | Number，默认空串",
|
|
"desc": "指标数值，由外部格式化"
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "String，默认 '📊'",
|
|
"desc": "标题右侧图标字符"
|
|
},
|
|
{
|
|
"name": "trend",
|
|
"type": "String，默认 'up'",
|
|
"desc": "趋势方向，直接作为类名使用"
|
|
},
|
|
{
|
|
"name": "trendText",
|
|
"type": "String，默认空串",
|
|
"desc": "趋势说明文字，与 trend 配套使用"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"全部是 div 与 span，没有 dl 之类的指标语义，读屏器按从左到右的顺序朗读标题、数值、趋势。",
|
|
"趋势的涨跌只靠类名与颜色，trendText 若未提供说明文字，读屏器无法得知涨跌方向。",
|
|
"图标字符会被读出（如「图表表情」），如属纯装饰建议业务侧包一层带 aria-hidden 的元素。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/DashboardCard.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "DashboardCard.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/DashboardCard.css",
|
|
"kind": "样式文件",
|
|
"desc": "DashboardCard.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"dashboardcard-ex-1",
|
|
"dashboardcard-ex-2"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/DashboardCard.vue2.vue:15-21。",
|
|
"趋势类名绑定见 frameworks/DashboardCard.vue2.vue:8 的 :class=\"trend\"。",
|
|
"模板共 10 行，三段结构见 frameworks/DashboardCard.vue2.vue:3-8。"
|
|
]
|
|
}
|