76 lines
3.4 KiB
JSON
76 lines
3.4 KiB
JSON
{
|
||
"slug": "descriptions",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 描述列表：以只读方式陈列订单、客户、员工等对象的结构化详情字段。",
|
||
"usage": [
|
||
"本端是 surface 桩：defineProps 声明 fields/columns/bordered 三项，模板只消费 props.title 与默认插槽，字段表当前不会渲染（Descriptions.vue3.vue:2）。",
|
||
"默认插槽用于补充内容，桩模板把它渲染在描述文字之后（Descriptions.vue3.vue:2）。",
|
||
"title 可覆盖占位标题「描述列表 Descriptions」（Descriptions.vue3.vue:2）。",
|
||
"本端 defineEmits 为空数组，字段值变化或行点击都不会外发事件（Descriptions.vue3.vue:12）。",
|
||
"没有 labelWidth、span（跨列）或布局方向等更细的表格控制项（Descriptions.vue3.vue:9）。"
|
||
],
|
||
"bestPractices": [
|
||
"这是 surface 桩：模板只消费 props.title，fields / columns / bordered 声明后都没有参与渲染，传入字段不会显示（Descriptions.vue3.vue:2）。",
|
||
"columns 的 1–4 列能力只写在描述文案里（\"支持 1–4 列\"），实现尚未接入；需要真实详情表请先手写 dl/table（Descriptions.vue3.vue:2）。",
|
||
"因为不消费 fields，字段的排序与空值处理在当前版本都无法通过 props 控制（Descriptions.vue3.vue:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "既有实现缺口：Descriptions.vue3.vue 是 surface 桩，模板只消费 props.title；fields/columns/bordered 声明未消费。",
|
||
"table": [
|
||
{
|
||
"name": "fields",
|
||
"type": "Array",
|
||
"desc": "详情字段配置，默认 []；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "columns",
|
||
"type": "Number",
|
||
"desc": "列配置，默认 3；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "bordered",
|
||
"type": "Boolean",
|
||
"desc": "是否显示边框，默认 true；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题文本，默认「描述列表 Descriptions」；模板实际消费的字段"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "slot(default)",
|
||
"desc": "默认插槽，当前渲染在描述文字之后"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"当前实现不输出 label/value 对照结构，读屏无法建立字段名与值的关联；接入后应使用 dl/dt/dd 或 table 语义（Descriptions.vue3.vue:2）。",
|
||
"桩模板的标题是 strong 而非 heading，详情区没有可跳读的标题层级（Descriptions.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Descriptions.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "descriptions 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Descriptions.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"descriptions-ex-1",
|
||
"descriptions-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Descriptions.vue3.vue:9 — 声明 fields/columns/bordered",
|
||
"frameworks/Descriptions.vue3.vue:12 — 空事件数组，无事件",
|
||
"frameworks/Descriptions.vue3.vue:2 — 模板仅消费 props.title（surface 桩）",
|
||
"实现缺口 frameworks/Descriptions.vue3.vue:12 — 既有实现缺口：surface 桩，模板只消费 props.title，fields/columns/bordered 声明后未被消费"
|
||
]
|
||
}
|