67 lines
3.1 KiB
JSON
67 lines
3.1 KiB
JSON
{
|
||
"slug": "progressvariants",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 progressvariants：type 在直线与环形之间切换，环形用 SVG 描边长度算进度，无事件无插槽。",
|
||
"usage": [
|
||
"`:type` 是二选一分支：line 渲染 .kole-progress-line（第 4 行），其余值走 v-else 的 SVG 环形（第 11 行），dashboard 还会额外转 135 度。",
|
||
"`:percent` 同时驱动两处：直线用 `:style=\"{ width: percent + '%' }\"`，环形用 `arcLen * (1 - percent / 100)` 算 stroke-dashoffset（第 6、16 行）。",
|
||
"`:show-info` 为真才显示右侧文字：直线是 `percent + '%'`，status 为 success 时改显示「完成」（第 7 行）。"
|
||
],
|
||
"bestPractices": [
|
||
"环形的周长来自 computed.circleCirc（2πr，r 固定 42，第 35 行），半径改了要同步改 SVG 里的 cx/cy/r，否则描边错位。",
|
||
"`:status` 在环形下只在非 normal 时拼 is-* 类（第 11 行），直线下则是无条件拼 `'is-' + status`，两侧类名规则不同。",
|
||
"color 计算属性按 status 取色（success/warning/error/normal，第 37-39 行），传未知 status 会退回品牌蓝，不会报错。"
|
||
],
|
||
"a11y": [
|
||
"组件自身不输出 role=\"progressbar\"，示例是外部手写这个属性传进去的（示例里显式写了 role=\"progressbar\"），漏写读屏就认不出进度条。",
|
||
"百分比文字在 showInfo 为假时不渲染，进度信息完全丢失，配合 role=\"progressbar\" 时应至少保留 aria-valuenow。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 4 项（type/percent/status/showInfo，frameworks/ProgressVariants.vue2.vue:27-32）：无事件、无插槽，形状与数值全部由这四项决定。",
|
||
"table": [
|
||
{
|
||
"name": "percent",
|
||
"type": "Number",
|
||
"desc": "百分比（frameworks/ProgressVariants.vue2.vue:6）"
|
||
},
|
||
{
|
||
"name": "showInfo",
|
||
"type": "Boolean",
|
||
"desc": "是否显示数值文案（frameworks/ProgressVariants.vue2.vue:7）"
|
||
},
|
||
{
|
||
"name": "status",
|
||
"type": "String",
|
||
"desc": "状态（契约：支持状态颜色（成功、警告、错误））（frameworks/ProgressVariants.vue2.vue:4）"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "String",
|
||
"desc": "类型（frameworks/ProgressVariants.vue2.vue:4）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ProgressVariants.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ProgressVariants.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"progressvariants-ex-1",
|
||
"progressvariants-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/ProgressVariants.vue2.vue:28-31；模板第 4-19 行消费四个 prop，两处 SVG 几何在 computed 第 35-39 行。",
|
||
"role=\"progressbar\" 不在实现里，示例第 1 条显式传入，因此无障碍属性需要调用方自备。"
|
||
]
|
||
}
|