100 lines
4.7 KiB
JSON
100 lines
4.7 KiB
JSON
{
|
||
"slug": "rate",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 端评分：modelValue 存分值，支持半星与只读，再点同一分值即清零。",
|
||
"usage": [
|
||
"defineProps 收 modelValue / count / allowHalf / readonly / disabled / size / showText / texts 八个（第 17-26 行），分值走 modelValue，配合 v-model 使用。",
|
||
"再点同一分值会清零：choose 里有 if (next === props.modelValue) next = 0（第 42 行），这是取消评分的方式。",
|
||
"allowHalf 时按点击位置判半星：取 evt.currentTarget.getBoundingClientRect() 与 clientX 比中线，落左半则给 i + 0.5（第 37-41 行）。",
|
||
"readonly 与 disabled 都在 choose 入口直接 return（第 35 行），行为一样，区别只在根上多一个 is-readonly 或 is-disabled 类（第 2 行）。",
|
||
"每次选择同时派发 update:modelValue 与 change（第 43-44 行），只收值用 v-model，想在流程里再做一步就另接 @change。"
|
||
],
|
||
"bestPractices": [
|
||
"texts 默认五条对应 count = 5（第 25 行）；count 调大后 Math.ceil 的结果会越界取到 undefined，要同步补 texts。",
|
||
"size 的 default 不加类，sm 与 lg 作为类名附在根上（第 2、23 行），字号覆盖写在样式文件的 .kole-rate.sm / .kole-rate.lg 里。",
|
||
"半星是两层 ★ 叠出来的：底层灰星加 .kole-rate-fill 按 width 裁剪（第 8 行），宽度取 (s*100)%，s 由 modelValue - i 夹进 0~1（第 29-31 行）。"
|
||
],
|
||
"a11y": [
|
||
"星是 span 加 @click（第 3-7 行），组件没有 role=\"radiogroup\" / \"radio\"，也没有 aria-checked，读屏器读不出当前几分。",
|
||
"readonly 与 disabled 只改类名并在第 35 行提前 return，DOM 上没有 aria-disabled 或 disabled 属性，辅助技术分不出只读与可编辑。",
|
||
"键盘没有等价入口（全文无 tabindex 与 keydown，第 1-12 行），allowHalf 的半星只有鼠标能选。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端载体是八个 props 加 update:modelValue 与 change 两个 emit；没有插槽，文案通过 texts prop 定制（表内只列了 change 一个事件）。",
|
||
"table": [
|
||
{
|
||
"name": "allowHalf",
|
||
"type": "Boolean",
|
||
"desc": "是否允许半选（frameworks/Rate.vue3.vue:20）"
|
||
},
|
||
{
|
||
"name": "count",
|
||
"type": "属性",
|
||
"desc": "星数上限，决定 stars 与刻度数量；调大后要同步补 texts，否则文案越界（frameworks/Rate.vue3.vue:19,29-31）"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "Boolean",
|
||
"desc": "是否禁用（frameworks/Rate.vue3.vue:2）"
|
||
},
|
||
{
|
||
"name": "modelValue",
|
||
"type": "Number",
|
||
"desc": "双向绑定值（frameworks/Rate.vue3.vue:18）"
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"type": "Boolean",
|
||
"desc": "是否只读（契约：尺寸 16/20/24px，支持半星、只读、字符自定义）（frameworks/Rate.vue3.vue:2）"
|
||
},
|
||
{
|
||
"name": "showText",
|
||
"type": "属性",
|
||
"desc": "为真才渲染 .kole-rate-text 文案行，内容由 textLabel 计算（frameworks/Rate.vue3.vue:10,32）"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "String",
|
||
"desc": "尺寸（契约：尺寸 16/20/24px，支持半星、只读、字符自定义）（frameworks/Rate.vue3.vue:2）"
|
||
},
|
||
{
|
||
"name": "texts",
|
||
"type": "Array",
|
||
"desc": "文案映射（frameworks/Rate.vue3.vue:25）"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "(val: any) => void",
|
||
"desc": "值变化时触发（frameworks/Rate.vue3.vue:27）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Rate.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Rate.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"rate-ex-1",
|
||
"rate-ex-2",
|
||
"rate-ex-3",
|
||
"rate-ex-4"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Rate.vue3.vue:17-26；emits 见第 27 行，声明了 update:modelValue 与 change 两个。",
|
||
"同值清零在 frameworks/Rate.vue3.vue:42，半星计算在第 37-41 行。",
|
||
"readonly 与 disabled 的拦截点同为 frameworks/Rate.vue3.vue:35，二者仅靠类名区分。",
|
||
"契约 apiTable 提到字符自定义；实现里星形恒为 ★、未做对应 prop（frameworks/Rate.vue3.vue:8），此处按实现记录。",
|
||
"count 参与 stars 的长度计算（frameworks/Rate.vue3.vue:29-31）；showText 只控制文案行的渲染（第 10 行），文案本身取自 texts。"
|
||
]
|
||
}
|