70 lines
3.4 KiB
JSON
70 lines
3.4 KiB
JSON
{
|
||
"slug": "progressvariants",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 进度条：线形与环形（含仪表盘）三种形态，按 status 切换语义色并可选百分比文案。",
|
||
"usage": [
|
||
"四个 props 通过 defineProps 声明为单向数据，组件不维护内部进度，也没有 update 类事件，进度完全由父组件的 ref 驱动（ProgressVariants.vue3.vue:24）。",
|
||
"percent 直接作为宽度或 dashoffset 计算依据，不做 0-100 裁剪，传 120 会画出超出容器的填充（ProgressVariants.vue3.vue:5）。",
|
||
"status 取 normal/success/warning/error，映射到固定色值；success 时线形进度条的文字会自动显示「完成」而不是百分比（ProgressVariants.vue3.vue:6）。",
|
||
"showInfo 默认 true；环形形态下百分比文字绝对定位在圆心，关掉后只剩圆环（ProgressVariants.vue3.vue:17）。",
|
||
"环形半径固定 r=42、描边 8，画布是 100×100 的 viewBox，缩放由外层尺寸控制（ProgressVariants.vue3.vue:10）。"
|
||
],
|
||
"bestPractices": [
|
||
"status 会影响颜色类名，normal 之外才附加 is-* 类（环形分支用三元判断），自定义配色需覆盖对应类而不是传色值（ProgressVariants.vue3.vue:9）。",
|
||
"圆形与仪表盘共用同一段弧长计算，仪表盘只是多了一个 rotate(135) 和 0.75 的弧长系数，切换 type 不会重置 percent（ProgressVariants.vue3.vue:15）。",
|
||
"组件不内置动画与过渡，percent 突变会瞬间跳变；需要平滑进度请在外层用 CSS transition 或自行插值（ProgressVariants.vue3.vue:4）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端无 emit：进度是纯展示型 props 组件，percent 由父组件单向驱动，不产生任何回写事件。",
|
||
"table": [
|
||
{
|
||
"name": "type",
|
||
"type": "String",
|
||
"desc": "line | circle | dashboard，默认 line；决定填充条还是 SVG 圆环"
|
||
},
|
||
{
|
||
"name": "percent",
|
||
"type": "Number",
|
||
"desc": "进度百分比，默认 0；不做 0-100 裁剪"
|
||
},
|
||
{
|
||
"name": "status",
|
||
"type": "String",
|
||
"desc": "normal | success | warning | error，默认 normal；映射固定语义色"
|
||
},
|
||
{
|
||
"name": "showInfo",
|
||
"type": "Boolean",
|
||
"desc": "是否显示百分比/完成文案，默认 true"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"实现里没有 role=\"progressbar\"，也没有 aria-valuenow / aria-valuemin，示例只能由使用方手写 role 补语义（ProgressVariants.vue3.vue:3）。",
|
||
"线形进度条的文字是「完成」或百分比纯文本，环形中心文字同样是裸 span，读屏不会把它当作进度值播报（ProgressVariants.vue3.vue:6）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ProgressVariants.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "progressvariants 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/ProgressVariants.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"progressvariants-ex-1",
|
||
"progressvariants-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/ProgressVariants.vue3.vue:26 — defineProps 声明 type/percent/status/showInfo",
|
||
"frameworks/ProgressVariants.vue3.vue:32 — 仪表盘用 0.75 弧长系数区分于整圆",
|
||
"frameworks/ProgressVariants.vue3.vue:33 — status 到语义色的映射表"
|
||
]
|
||
}
|