69 lines
2.7 KiB
JSON
69 lines
2.7 KiB
JSON
{
|
||
"slug": "steplist",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 步骤列表，与步骤条不同之处在于支持点击并回传索引，节点内可写描述。",
|
||
"usage": [
|
||
"Vue 2 端 clickable 打开后整项可点击，派发 step-click 并回传该步的索引。",
|
||
"点击判断写作 clickable && $emit(...)，关闭 clickable 时表达式短路，不会派发事件。",
|
||
"节点文字由 nodeText 生成：done 显示 ✓、error 显示 ✕、其余显示序号。",
|
||
"direction 与时间轴一样用 is-horizontal 类切换方向。"
|
||
],
|
||
"bestPractices": [
|
||
"步骤数组必填，每项形如 { title, desc, status }，status 直接参与 is-<status> 类名拼接。",
|
||
"clickable 只加 is-clickable 类并允许点击，不改变节点文字，视觉提示完全由 CSS 承担。",
|
||
"本组件与 steps 的差别是支持点击回传与节点状态由数据指定，需要自动按 current 推导状态时用 steps。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 3 个 prop 加 1 个 step-click 事件，状态由数据提供而非索引推导。",
|
||
"table": [
|
||
{
|
||
"name": "steps",
|
||
"type": "Array，默认空数组",
|
||
"desc": "步骤数据，形如 { title, desc, status }"
|
||
},
|
||
{
|
||
"name": "direction",
|
||
"type": "String，默认 'vertical'",
|
||
"desc": "取值 vertical / horizontal"
|
||
},
|
||
{
|
||
"name": "clickable",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "是否允许点击并派发 step-click"
|
||
},
|
||
{
|
||
"name": "step-click",
|
||
"type": "事件，参数为步骤索引",
|
||
"desc": "点击步骤项时派发，仅在 clickable 为真时"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"可点击的步骤项是 div，没有 tabindex 也没有 role=\"button\"，键盘无法触发。",
|
||
"节点文字含 ✓ 与 ✕ 符号，读屏器会念出符号，可部分补偿状态不可读的问题。",
|
||
"没有 aria-current 标记当前步骤，方向类也不影响语义。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/StepList.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "StepList.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/StepList.css",
|
||
"kind": "样式文件",
|
||
"desc": "StepList.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"steplist-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/StepList.vue2.vue:18-22。",
|
||
"点击短路写法见 frameworks/StepList.vue2.vue:4，节点文字见第 23-28 行的 nodeText 方法。",
|
||
"is-clickable 与状态类拼接同在第 4 行。"
|
||
]
|
||
}
|