74 lines
4.4 KiB
JSON
74 lines
4.4 KiB
JSON
{
|
||
"slug": "steplist",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 步骤列表：steps 数组里每项自带 status，组件按状态给节点换成 ✓ / ✕ / 序号，clickable 时才可点。",
|
||
"usage": [
|
||
"状态由数据决定而非序号推导：模板直接拼 'is-' + it.status，节点文字交给 nodeText 按 status 分支取（frameworks/StepList.vue3.vue:3-4,23-27）。",
|
||
"nodeText 只认 done 与 error 两个状态，返回 ✓ 和 ✕，其余一律回落成 String(i+1) 的序号，所以 active / pending 都显示数字（frameworks/StepList.vue3.vue:23-27）。",
|
||
"clickable 同时给两项：整项挂 is-clickable 类（cursor: pointer 与标题变品牌色），并且只有它为真时模板才执行 emit('step-click', i)，回传的是索引而不是该项对象（frameworks/StepList.vue3.vue:4）。",
|
||
"direction 取 'horizontal' 才给根节点加 is-horizontal，样式把连接线由竖向改为横向、每项 flex:1 均分宽度（frameworks/StepList.vue3.vue:2）。",
|
||
"每项含 node / line / body 三段：line 在最后一项上被 :last-child 隐藏，body 里 desc 有值才渲染，所以不需要的连接线不用手动清（frameworks/StepList.vue3.vue:5-10）。"
|
||
],
|
||
"bestPractices": [
|
||
"desc 用 v-if=\"it.desc\" 控制，显式给空串就不会留出一行空白；不传 desc 才是真正不渲染（frameworks/StepList.vue3.vue:9）。",
|
||
"clickable 为假时既没有指针光标也不派发事件，不需要在 @step-click 里再判断一次可点性（frameworks/StepList.vue3.vue:4）。",
|
||
"末项的连接线不需要手工去掉：样式用 :last-child 同时清掉它的 padding-bottom 并把 .kole-steplist-line 设为 display: none，两个方向都生效（StepList.css:6-7）。",
|
||
"vue3 端没有 current prop：进度完全由数据里的 status 表达，想做「按序号推进」应改用 Steps 组件（frameworks/StepList.vue3.vue:16-20）。"
|
||
],
|
||
"a11y": [
|
||
"实现里没有 role=\"list\"/\"listitem\"，节点符号 ✓ ✕ 也没有文字替代，读屏器读到的只是纯文本序号（frameworks/StepList.vue3.vue:5）。",
|
||
"整项可点时是可点击的 <div>，没有 tabindex 也没有键盘处理，键盘用户无法触达 step-click（frameworks/StepList.vue3.vue:4）。",
|
||
"状态只通过 CSS 类体现（is-done 给节点填品牌色底），若状态本身是重要信息，建议在 title 或 desc 里补一句文字描述（StepList.css:16-20）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 3 端载体是 3 个 props（steps / direction / clickable）加 1 个 emit step-click（参数为被点项的索引）；无插槽，节点文字与结构由组件内部按数据生成。",
|
||
"table": [
|
||
{
|
||
"name": "clickable",
|
||
"type": "Boolean",
|
||
"desc": "是否可点击（frameworks/StepList.vue3.vue:4）"
|
||
},
|
||
{
|
||
"name": "direction",
|
||
"type": "String",
|
||
"desc": "方向（frameworks/StepList.vue3.vue:2）"
|
||
},
|
||
{
|
||
"name": "steps",
|
||
"type": "Array",
|
||
"desc": "步骤数据（frameworks/StepList.vue3.vue:3）"
|
||
},
|
||
{
|
||
"name": "step-click",
|
||
"type": "(val: any) => void",
|
||
"desc": "点击步骤节点时触发（frameworks/StepList.vue3.vue:4）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/StepList.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/StepList.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"steplist-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/StepList.vue3.vue:16-20 defineProps 声明 steps/direction/clickable 三项。",
|
||
"依据 frameworks/StepList.vue3.vue:21 defineEmits(['step-click'])；4 行 emit('step-click', i) 回传索引。",
|
||
"依据 frameworks/StepList.vue3.vue:23-27 nodeText 只处理 done / error，其余回落为 i+1。",
|
||
"依据 frameworks/StepList.vue3.vue:4 类名数组为 ['is-' + it.status, { 'is-clickable': clickable }]，事件与 clickable 短路口径一致。",
|
||
"依据 frameworks/StepList.vue3.vue:30 样式经 <style src=\"./StepList.css\"> 外链，状态类定义见 StepList.css:13-20,23-26。",
|
||
"契约声明的驱动维度（orientation / state）属设计词汇层，未作为 prop 写入本页。"
|
||
]
|
||
}
|