99 lines
5.0 KiB
JSON
99 lines
5.0 KiB
JSON
{
|
||
"slug": "emptypro",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端空状态组件：六个 String prop（type/icon/title/desc/两个按钮文案），点击派发 action 与 secondary 事件。",
|
||
"usage": [
|
||
"用法是标签属性全打平：<KoleEmptyPro type=\"empty\" action-text=\"主要操作\" secondary-text=\"次要操作\" @action=\"handlePrimary\" @secondary=\"handleSecondary\" />（EmptyPro.vue2.vue:6-8）。",
|
||
"六个 prop 全是 String 且默认空串（除 type 默认 'empty'）；覆盖逻辑放在 computed resolved 里，写的是 this.icon || p.icon || '📭'（EmptyPro.vue2.vue:17-22,32-36）。",
|
||
"两个按钮各自 v-if：actionText 有值才渲染主按钮并 $emit('action')，secondaryText 有值才渲染次按钮并 $emit('secondary')；事件不带载荷（EmptyPro.vue2.vue:6-8）。",
|
||
"描述节点同样 v-if=\"resolved.desc\"，没传 desc 时预置项里的描述会顶上，因此实际上很少为空（EmptyPro.vue2.vue:5,33-35）。",
|
||
"props 里没有事件对象可选，模板直接写 @click=\"$emit('action')\"，回调签名固定为无参（EmptyPro.vue2.vue:7-8）。",
|
||
"样式经 <style src=\"./EmptyPro.css\"> 引入，类名结构与 CSS 端一致（EmptyPro.vue2.vue:42）。"
|
||
],
|
||
"bestPractices": [
|
||
"本端没有 update:xxx 事件，无法用 .sync 或 v-model 回写任何状态，空状态是纯展示组件（EmptyPro.vue2.vue:7-8,16-23）。",
|
||
"示例里给组件也写了 role=\"status\"，但 props 未声明该字段，Vue 2 会把它当普通 attr 落到根节点上，这与 React 端不同（EmptyPro.vue2.vue:2；示例代码 emptypro-ex-1）。",
|
||
"resolved 每次依赖变化都新建一个四键对象字面量，场景表跟着重算；若在长列表里大量渲染，建议把表提到模块作用域（EmptyPro.vue2.vue:26-31）。",
|
||
"按钮文案是 String 而非 slot，要做「主按钮带图标」这类定制只能改组件或放弃预置结构（EmptyPro.vue2.vue:7-8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 API 载体是 props 加 emit：六个 String prop 控制场景与文案，两个无载荷事件 action / secondary 回传按钮点击；组件没有插槽，也没有 v-model 语义。",
|
||
"table": [
|
||
{
|
||
"name": "type",
|
||
"type": "String，默认 'empty'",
|
||
"desc": "场景键，取 empty / permission / search / error 之一"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"type": "String，默认 ''",
|
||
"desc": "插画覆盖值，非空优先于场景预置"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String，默认 ''",
|
||
"desc": "标题覆盖值，非空优先于场景预置"
|
||
},
|
||
{
|
||
"name": "desc",
|
||
"type": "String，默认 ''",
|
||
"desc": "描述覆盖值，为空时用预置描述"
|
||
},
|
||
{
|
||
"name": "actionText",
|
||
"type": "String，默认 ''",
|
||
"desc": "主按钮文案，非空才渲染该按钮"
|
||
},
|
||
{
|
||
"name": "secondaryText",
|
||
"type": "String，默认 ''",
|
||
"desc": "次按钮文案，非空才渲染该按钮"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"type": "事件，无载荷",
|
||
"desc": "主按钮点击时派发"
|
||
},
|
||
{
|
||
"name": "secondary",
|
||
"type": "事件，无载荷",
|
||
"desc": "次按钮点击时派发"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"Vue 2 会把未声明的 role 属性透传到根节点，因此示例里写的 role=\"status\" 实际能生效，空状态区可被读屏器播报（EmptyPro.vue2.vue:2）。",
|
||
"两个按钮是 <button> 元素，Tab 可聚焦、回车可触发，不需要补 tabindex（EmptyPro.vue2.vue:7-8）。",
|
||
"插画是 emoji 文本，读屏器可能朗读其 emoji 名称；纯装饰场景建议由业务侧替换为 aria-hidden 节点（EmptyPro.vue2.vue:3）。",
|
||
"标题文案本身写明场景（「无访问权限」「未找到结果」），不靠颜色或插画区分，色觉障碍用户可辨（EmptyPro.vue2.vue:27-30）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/EmptyPro.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "EmptyPro.vue2.vue —— 模板、六个 prop、resolved computed 与两个 $emit 事件"
|
||
},
|
||
{
|
||
"file": "frameworks/EmptyPro.css",
|
||
"kind": "样式文件",
|
||
"desc": "EmptyPro.css —— <style src> 引入的 .kole-empty 系列类名与配色"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"emptypro-ex-1",
|
||
"emptypro-ex-2",
|
||
"emptypro-ex-3",
|
||
"emptypro-ex-4"
|
||
],
|
||
"notes": [
|
||
"prop 声明六项与默认值：frameworks/EmptyPro.vue2.vue:17-22",
|
||
"resolved computed 与覆盖顺序：frameworks/EmptyPro.vue2.vue:25-37",
|
||
"按钮 v-if 与 $emit：frameworks/EmptyPro.vue2.vue:6-8",
|
||
"描述 v-if：frameworks/EmptyPro.vue2.vue:5",
|
||
"样式引入：frameworks/EmptyPro.vue2.vue:42",
|
||
"role=\"status\" 走未声明属性的自动透传，属于 Vue 2 行为而非组件 API，因此没有写进 table。"
|
||
]
|
||
}
|